{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import time\n",
    "import panel as pn\n",
    "import holoviews as hv\n",
    "import numpy as np\n",
    "\n",
    "pn.extension(loading_spinner='dots', loading_color='#00aa41', sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Every pane, widget and layout provides the `loading` parameter. When set to `True` a spinner will overlay the panel and indicate that the panel is currently loading. When you set `loading` to false the spinner is removed. Using the `pn.extension` or by setting the equivalent parameters on `pn.config` we can select between different visual styles and colors for the loading indicator.\n",
    "\n",
    "Using the `pn.param.set_values` context manager we can set the `loading` parameter to `True` while we perform some computation (here simulated using `time.sleep`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "button = pn.widgets.Button(name=\"Update\", margin=(0, 32, 0, 57), button_type=\"primary\")\n",
    "\n",
    "def random_plot():\n",
    "    return hv.Points(np.random.rand(100, 2)).opts(\n",
    "        width=400, height=400, size=8, color=\"#838383\")\n",
    "\n",
    "hv_pane = pn.pane.HoloViews(random_plot())\n",
    "\n",
    "def update(event):\n",
    "    with pn.param.set_values(hv_pane, loading=True):\n",
    "        time.sleep(1.5)\n",
    "        hv_pane.object = random_plot()\n",
    "    \n",
    "button.on_click(update)\n",
    "\n",
    "component = pn.Column(button, hv_pane)\n",
    "component"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve loading_spinner.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", \n",
    "    title=\"Loading Spinner\", \n",
    "    main=[\n",
    "        \"\"\"**Every pane, widget and layout provides the `loading` parameter**.\\n\\nWhen set to `True` a spinner will overlay the panel and indicate that the panel is currently loading. When you set `loading` to false the spinner is removed.\\n\\nUsing the `pn.extension` or by setting the equivalent parameters on `pn.config` we can select between **different visual styles and colors** for the loading indicator.\"\"\",\n",
    "        component\n",
    "    ], main_max_width=\"768px\",\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}