refactor: skeleton

demo/src/pages/components.rs

@@ -171,6 +171,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/icon".into(),
                     label: "Icon".into(),
                 },
+                MenuItemOption {
+                    value: "/components/skeleton".into(),
+                    label: "Skeleton".into(),
+                },
                 MenuItemOption {
                     value: "/components/spin-button".into(),
                     label: "Spin Button".into(),
@@ -283,10 +287,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/progress".into(),
                     label: "Progress".into(),
                 },
-                MenuItemOption {
-                    value: "/components/skeleton".into(),
-                    label: "Skeleton".into(),
-                },
                 MenuItemOption {
                     value: "/components/layout".into(),
                     label: "Layout".into(),

demo_markdown/docs/skeleton/mod.md

@@ -2,8 +2,9 @@
 
 ```rust demo
 view! {
-    <Skeleton repeat=2 text=true/>
+    <Skeleton>
-    <Skeleton width="60%" text=true/>
+        <SkeletonItem/>
+    </Skeleton>
 }
 ```
 

thaw/src/skeleton/mod.rs

@@ -1,49 +1,5 @@
-mod theme;
+mod skeleton;
+mod skeleton_item;
 
-pub use theme::SkeletionTheme;
+pub use skeleton::*;
-
+pub use skeleton_item::*;
-use crate::{theme::use_theme, Theme};
-use leptos::*;
-use thaw_utils::mount_style;
-
-#[component]
-pub fn Skeleton(
-    #[prop(default = MaybeSignal::Static(1), into)] repeat: MaybeSignal<u32>,
-    #[prop(optional, into)] text: MaybeSignal<bool>,
-    #[prop(optional, into)] width: Option<MaybeSignal<String>>,
-    #[prop(optional, into)] height: Option<MaybeSignal<String>>,
-) -> impl IntoView {
-    mount_style("skeleton", include_str!("./skeleton.css"));
-    let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
-        let mut css_vars = String::new();
-        if text.get() {
-            css_vars.push_str("display: inline-block;");
-        }
-
-        if let Some(width) = width.as_ref() {
-            css_vars.push_str(&format!("width: {};", width.get()));
-        }
-        if let Some(height) = height.as_ref() {
-            css_vars.push_str(&format!("height: {};", height.get()));
-        }
-
-        theme.with(|theme| {
-            css_vars.push_str(&format!(
-                "--thaw-background-color-start: {};",
-                theme.skeletion.background_color_start
-            ));
-            css_vars.push_str(&format!(
-                "--thaw-background-color-end: {};",
-                theme.skeletion.background_color_end
-            ));
-        });
-
-        css_vars
-    });
-    (0..repeat.get())
-        .map(|_| {
-            view! { <div class="thaw-skeleton" style=move || css_vars.get()></div> }
-        })
-        .collect_view()
-}

thaw/src/skeleton/skeleton-item.css

@@ -0,0 +1,31 @@
+.thaw-skeleton-item {
+    background-image: linear-gradient(
+        to right,
+        var(--colorNeutralStencil1) 0%,
+        var(--colorNeutralStencil2) 50%,
+        var(--colorNeutralStencil1) 100%
+    );
+    animation-name: thaw-skeleton-item;
+    animation-timing-function: linear;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    background-attachment: fixed;
+    background-position-y: 50%;
+    background-position-x: 50%;
+    background-size: 300% 100%;
+    position: relative;
+    width: 100%;
+    height: 16px;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+@keyframes thaw-skeleton-item {
+    0% {
+        background-position-x: 300%;
+    }
+
+    100% {
+        background-position-x: 0%;
+    }
+}

thaw/src/skeleton/skeleton.css

@@ -1,24 +0,0 @@
-.thaw-skeleton {
-    width: 100%;
-    height: 1em;
-    background-color: var(--thaw-background-color-start);
-
-    background: linear-gradient(
-        90deg,
-        var(--thaw-background-color-start) 25%,
-        var(--thaw-background-color-end) 37%,
-        var(--thaw-background-color-start) 63%
-    );
-    animation: thawSkeletonLoading 1.4s ease infinite;
-    background-size: 400% 100%;
-}
-
-@keyframes thawSkeletonLoading {
-    from {
-        background-position: 100% 50%;
-    }
-
-    to {
-        background-position: 0 50%;
-    }
-}

thaw/src/skeleton/skeleton.rs

@@ -0,0 +1,14 @@
+use leptos::*;
+
+#[component]
+pub fn Skeleton(children: Children) -> impl IntoView {
+    view! {
+        <div
+            role="progressbar"
+            aria-busy="true"
+            class="thaw-skeleton"
+        >
+            {children()}
+        </div>
+    }
+}

thaw/src/skeleton/skeleton_item.rs

@@ -0,0 +1,12 @@
+use leptos::*;
+use thaw_utils::mount_style;
+
+#[component]
+pub fn SkeletonItem() -> impl IntoView {
+    mount_style("skeleton-item", include_str!("./skeleton-item.css"));
+
+    view! {
+        <div class="thaw-skeleton-item">
+        </div>
+    }
+}

thaw/src/skeleton/theme.rs

@@ -1,23 +0,0 @@
-use crate::theme::ThemeMethod;
-
-#[derive(Clone)]
-pub struct SkeletionTheme {
-    pub background_color_start: String,
-    pub background_color_end: String,
-}
-
-impl ThemeMethod for SkeletionTheme {
-    fn light() -> Self {
-        Self {
-            background_color_start: "#f2f2f2".into(),
-            background_color_end: "#e6e6e6".into(),
-        }
-    }
-
-    fn dark() -> Self {
-        Self {
-            background_color_start: "rgba(255, 255, 255, 0.12)".into(),
-            background_color_end: "rgba(255, 255, 255, 0.18)".into(),
-        }
-    }
-}

thaw/src/theme/color.rs

@@ -39,6 +39,9 @@ pub struct ColorTheme {
     pub color_neutral_stroke_accessible_hover: String,
     pub color_neutral_stroke_accessible_pressed: String,
 
+    pub color_neutral_stencil_1: String,
+    pub color_neutral_stencil_2: String,
+
     pub color_compound_brand_foreground_1: String,
     pub color_compound_brand_foreground_1_hover: String,
     pub color_compound_brand_foreground_1_pressed: String,
@@ -133,6 +136,9 @@ impl ColorTheme {
             color_neutral_stroke_accessible_hover: "#575757".into(),
             color_neutral_stroke_accessible_pressed: "#4d4d4d".into(),
 
+            color_neutral_stencil_1: "#e6e6e6".into(),
+            color_neutral_stencil_2: "#fafafa".into(),
+
             color_compound_brand_foreground_1: "#0f6cbd".into(),
             color_compound_brand_foreground_1_hover: "#115ea3".into(),
             color_compound_brand_foreground_1_pressed: "#0f548c".into(),
@@ -228,6 +234,9 @@ impl ColorTheme {
             color_neutral_stroke_accessible_hover: "#bdbdbd".into(),
             color_neutral_stroke_accessible_pressed: "#b3b3b3".into(),
 
+            color_neutral_stencil_1: "#575757".into(),
+            color_neutral_stencil_2: "#333333".into(),
+
             color_compound_brand_foreground_1: "#479ef5".into(),
             color_compound_brand_foreground_1_hover: "#62abf5".into(),
             color_compound_brand_foreground_1_pressed: "#2886de".into(),

thaw/src/theme/mod.rs

@@ -6,7 +6,7 @@ use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme,
     DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme,
-    SelectTheme, SkeletionTheme, TableTheme, TimePickerTheme, UploadTheme,
+    SelectTheme, TableTheme, TimePickerTheme, UploadTheme,
 };
 pub use color::ColorTheme;
 use leptos::*;
@@ -24,7 +24,6 @@ pub struct Theme {
     pub input: InputTheme,
     pub table: TableTheme,
     pub alert: AlertTheme,
-    pub skeletion: SkeletionTheme,
     pub message: MessageTheme,
     pub select: SelectTheme,
     pub upload: UploadTheme,
@@ -51,7 +50,6 @@ impl Theme {
             input: InputTheme::light(),
             table: TableTheme::light(),
             alert: AlertTheme::light(),
-            skeletion: SkeletionTheme::light(),
             message: MessageTheme::light(),
             select: SelectTheme::light(),
             upload: UploadTheme::light(),
@@ -77,7 +75,6 @@ impl Theme {
             input: InputTheme::dark(),
             table: TableTheme::dark(),
             alert: AlertTheme::dark(),
-            skeletion: SkeletionTheme::dark(),
             message: MessageTheme::dark(),
             select: SelectTheme::dark(),
             upload: UploadTheme::dark(),