{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2",
   "metadata": {},
   "source": [
    "The `Skeleton` wraps a child component and displays an animated placeholder in its place while loading. When `active` is True the child is shown; when False the skeleton placeholder is rendered.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`active`** (bool): Whether to show the child content. When False the skeleton placeholder is rendered; when True the child is displayed normally. Default is False.\n",
    "* **`object`** (Viewable): The child component to wrap with the skeleton.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`animation`** (str or None): The animation effect for the skeleton - options are 'pulse' (default), 'wave', or None (disabled).\n",
    "* **`variant`** (str): Shape variant of the skeleton placeholder - options are 'text', 'circular', 'rectangular', or 'rounded' (default).\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API for advanced customization\n",
    "- **`theme_config`** (dict): Theming API for consistent design system integration\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Wrap a component and toggle `active` to reveal it once loaded:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=False, label=\"Loaded\")\n",
    "\n",
    "skeleton = pmui.Skeleton(\n",
    "    pmui.Button(label=\"Click me\", variant=\"contained\", color=\"primary\"),\n",
    "    active=toggle,\n",
    "    variant=\"rounded\",\n",
    ")\n",
    "\n",
    "pmui.Column(toggle, skeleton)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c1",
   "metadata": {},
   "source": [
    "### Variants\n",
    "\n",
    "The skeleton supports different shape variants to match the content it's replacing:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=False, label=\"Loaded\")\n",
    "\n",
    "pmui.Column(\n",
    "    toggle,\n",
    "    pmui.Column(\n",
    "        pmui.Skeleton(\n",
    "            pmui.Chip(label=\"Text\", color=\"primary\"),\n",
    "            active=toggle,\n",
    "            variant=\"text\",\n",
    "        ),\n",
    "        pmui.Skeleton(\n",
    "            pmui.Chip(label=\"Rounded\", color=\"primary\"),\n",
    "            active=toggle,\n",
    "            variant=\"rounded\",\n",
    "        ),\n",
    "        pmui.Skeleton(\n",
    "            pmui.Chip(label=\"Rectangular\", color=\"primary\"),\n",
    "            active=toggle,\n",
    "            variant=\"rectangular\",\n",
    "        ),\n",
    "    ),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d1",
   "metadata": {},
   "source": [
    "### Animation\n",
    "\n",
    "Choose between pulse (default), wave, or no animation:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=False, label=\"Loaded\")\n",
    "\n",
    "pmui.Column(\n",
    "    toggle,\n",
    "    pmui.Skeleton(\n",
    "        pmui.Button(label=\"Pulse\", variant=\"contained\"),\n",
    "        active=toggle,\n",
    "        animation=\"pulse\",\n",
    "        variant=\"rounded\",\n",
    "    ),\n",
    "    pmui.Skeleton(\n",
    "        pmui.Button(label=\"Wave\", variant=\"contained\"),\n",
    "        active=toggle,\n",
    "        animation=\"wave\",\n",
    "        variant=\"rounded\",\n",
    "    ),\n",
    "    pmui.Skeleton(\n",
    "        pmui.Button(label=\"None\", variant=\"contained\"),\n",
    "        active=toggle,\n",
    "        animation=None,\n",
    "        variant=\"rounded\",\n",
    "    ),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e1",
   "metadata": {},
   "source": [
    "### Revealing Content\n",
    "\n",
    "Set `active=True` to reveal the wrapped child:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = pmui.Switch(value=False, label=\"Loaded\")\n",
    "\n",
    "pmui.Column(\n",
    "    toggle,\n",
    "    pmui.Row(\n",
    "        pmui.Skeleton(\n",
    "            pmui.Chip(label=\"Loading\", color=\"warning\"),\n",
    "            active=toggle,\n",
    "            variant=\"rounded\",\n",
    "        ),\n",
    "    ),\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5d2d1ca2-f968-4ccb-983e-c6562478eb6f",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}