Add skeleton.py in chartlets.py

Author: b-yogesh

chartlets.py/chartlets/components/__init__.py

@@ -10,6 +10,7 @@
 from .radiogroup import Radio
 from .radiogroup import RadioGroup
 from .select import Select
+from .skeleton import Skeleton
 from .slider import Slider
 from .switch import Switch
 from .tabs import Tab

chartlets.py/chartlets/components/charts/vega.py

@@ -36,6 +36,10 @@ class VegaChart(Component):
     chart: altair.Chart | None = None
     """The [Vega Altair chart](https://altair-viz.github.io/gallery/index.html)."""
 
+    skeletonProps: dict[str, Any] | None = None
+    """Add the skeleton props from the Skeleton MUI component to render a 
+    skeleton during long loading times."""
+
     def to_dict(self) -> dict[str, Any]:
         d = super().to_dict()
         if self.chart is not None:

chartlets.py/chartlets/components/skeleton.py

@@ -0,0 +1,27 @@
+from dataclasses import dataclass
+from typing import Literal
+
+from chartlets import Component
+
+
+@dataclass(frozen=True)
+class Skeleton(Component):
+    """Display a placeholder preview of your content before the data gets
+    loaded to reduce load-time frustration."""
+
+    variant: Literal["text", "rectangular", "circular", "rounded"] | str | None\
+        = None
+    """The type of skeleton to display."""
+
+    width: str | int | None = None
+    """Width of the skeleton. Can be a number (pixels) or a string (e.g., '100%')."""
+
+    height: str | int | None = None
+    """Height of the skeleton. Can be a number (pixels) or a string (e.g., '50px')."""
+
+    animation: Literal["pulse", "wave", False] | None = None
+    """The animation effect to use.
+    - 'pulse': A subtle pulsing animation.
+    - 'wave': A shimmering animation.
+    - False: No animation.
+    """