implemented skeleton loading for tailwind preset

Author: maccesch

examples/pagination/src/main.rs

@@ -14,7 +14,7 @@ pub fn App() -> impl IntoView {
 
     view! {
         <div class="rounded-md overflow-clip m-10 border dark:border-gray-700".to_string()>
-            <table class="text-sm text-left text-gray-500 dark:text-gray-400 mb-[-1px]">
+            <table class="text-sm text-left text-gray-500 dark:text-gray-400 mb-[-1px] w-[calc(100vw-5rem)]">
                 <TableContent
                     rows=rows
                     display_strategy=DisplayStrategy::Pagination {

examples/pagination/src/tailwind.rs

@@ -51,6 +51,23 @@ impl TableClassesProvider for TailwindClassesPreset {
         )
     }
 
+    fn loading_cell(&self, prop_class: &str) -> String {
+        format!("{} {}", "px-5 py-2", prop_class)
+    }
+
+    fn loading_cell_inner(&self, row_index: usize, prop_class: &str) -> String {
+        let width = match row_index % 4 {
+            0 => "w-[calc(85%-2.5rem)]",
+            1 => "w-[calc(90%-2.5rem)]",
+            2 => "w-[calc(75%-2.5rem)]",
+            _ => "w-[calc(60%-2.5rem)]",
+        };
+        format!(
+            "animate-pulse h-2 bg-gray-200 rounded-full dark:bg-gray-700 inline-block align-middle {} {}",
+            width, prop_class
+        )
+    }
+
     fn cell(&self, template_classes: &str) -> String {
         format!("{} {}", "px-5 py-2", template_classes)
     }

examples/pagination/style/output.css

@@ -556,6 +556,16 @@ video {
   margin: 2.5rem;
 }
 
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-\[-1px\] {
   margin-bottom: -1px;
 }
@@ -572,6 +582,10 @@ video {
   margin-inline-end: 0.5rem;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -600,6 +614,10 @@ video {
   height: 0.875rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -608,6 +626,80 @@ video {
   width: 0.875rem;
 }
 
+.w-\[60\%\] {
+  width: 60%;
+}
+
+.w-\[75\%\] {
+  width: 75%;
+}
+
+.w-\[80\%\] {
+  width: 80%;
+}
+
+.w-\[90\%\] {
+  width: 90%;
+}
+
+.w-\[calc\(60\%-2\.5rem\)\] {
+  width: calc(60% - 2.5rem);
+}
+
+.w-\[calc\(75\%-2\.5rem\)\] {
+  width: calc(75% - 2.5rem);
+}
+
+.w-\[calc\(80\%-2\.5rem\)\] {
+  width: calc(80% - 2.5rem);
+}
+
+.w-\[calc\(90\%-2\.5rem\)\] {
+  width: calc(90% - 2.5rem);
+}
+
+.w-\[calc\(100vw-10rem\)\] {
+  width: calc(100vw - 10rem);
+}
+
+.w-\[calc\(100vw-50rem\)\] {
+  width: calc(100vw - 50rem);
+}
+
+.w-\[calc\(100vw-5rem\)\] {
+  width: calc(100vw - 5rem);
+}
+
+.w-\[calc\(85\%-2\.5rem\)\] {
+  width: calc(85% - 2.5rem);
+}
+
+.max-w-\[60\%\] {
+  max-width: 60%;
+}
+
+.max-w-\[75\%\] {
+  max-width: 75%;
+}
+
+.max-w-\[80\%\] {
+  max-width: 80%;
+}
+
+.max-w-\[90\%\] {
+  max-width: 90%;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -642,6 +734,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-e-lg {
   border-start-end-radius: 0.5rem;
   border-end-end-radius: 0.5rem;
@@ -694,6 +790,11 @@ video {
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -718,6 +819,10 @@ video {
   text-align: left;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;

src/class_providers/mod.rs

@@ -53,11 +53,19 @@ pub trait TableClassesProvider {
         prop_class.to_string() + if selected { " selected" } else { "" }
     }
 
+    /// Get the classes for the elements inside of the cells of rows that are currently
+    /// being loaded.
+    /// The `prop_class` parameter contains the classes specified in the
+    /// `loading_cell_class` prop of the [`TableContent`] component.
+    fn loading_cell(&self, prop_class: &str) -> String {
+        prop_class.to_string()
+    }
+
     /// Get the classes for the elements inside of the cells of rows that are currently
     /// being loaded. Usually this will be some loading indicator like a sceleton bar.
     /// The `prop_class` parameter contains the classes specified in the
-    /// `loading_row_inner_class` prop of the [`TableContent`] component.
-    fn loading_row_inner(&self, prop_class: &str) -> String {
+    /// `loading_cell_inner_class` prop of the [`TableContent`] component.
+    fn loading_cell_inner(&self, row_index: usize, prop_class: &str) -> String {
         prop_class.to_string()
     }
 

src/components/row.rs

@@ -47,16 +47,17 @@ pub fn DefaultErrorRowRenderer(err: String, index: usize, col_count: usize) -> i
 #[allow(unused_variables)]
 pub fn DefaultLoadingRowRenderer(
     class: Signal<String>,
-    inner_class: Signal<String>,
+    cell_class: Signal<String>,
+    inner_cell_class: Signal<String>,
     index: usize,
     col_count: usize,
 ) -> impl IntoView {
     view! {
         <tr class=class>
             {
                 (0..col_count).map(|_| view! {
-                    <td>
-                        <div class=inner_class></div>
+                    <td class=cell_class>
+                        <div class=inner_cell_class></div>
                         " "
                     </td>
                 }).collect_view()

src/components/table_content.rs

@@ -49,7 +49,7 @@ renderer_fn!(
 );
 
 renderer_fn!(
-    LoadingRowRendererFn(class: Signal<String>, inner_class: Signal<String>, index: usize, col_count: usize)
+    LoadingRowRendererFn(class: Signal<String>, cell_class: Signal<String>, cell_inner_class: Signal<String>, index: usize, col_count: usize)
     default DefaultLoadingRowRenderer
 );
 
@@ -73,7 +73,8 @@ pub fn TableContent<Row, DataP, ClsP>(
     #[prop(optional, into)] thead_class: MaybeSignal<String>,
     #[prop(optional, into)] thead_row_class: MaybeSignal<String>,
     #[prop(optional, into)] tbody_class: MaybeSignal<String>,
-    #[prop(optional, into)] loading_row_inner_class: MaybeSignal<String>,
+    #[prop(optional, into)] loading_cell_class: MaybeSignal<String>,
+    #[prop(optional, into)] loading_cell_inner_class: MaybeSignal<String>,
     #[prop(default = create_rw_signal(VecDeque::new()), into)] sorting: RwSignal<
         VecDeque<(usize, ColumnSort)>,
     >,
@@ -114,7 +115,8 @@ where
     let class_provider = ClsP::new();
 
     let row_class = Signal::derive(move || row_class.get());
-    let loading_row_inner_class = Signal::derive(move || loading_row_inner_class.get());
+    let loading_cell_inner_class = Signal::derive(move || loading_cell_inner_class.get());
+    let loading_cell_class = Signal::derive(move || loading_cell_class.get());
     let thead_class = Signal::derive(move || class_provider.thead(&thead_class.get()));
     let thead_row_class = Signal::derive(move || class_provider.thead_row(&thead_row_class.get()));
     let tbody_class = Signal::derive(move || class_provider.tbody(&tbody_class.get()));
@@ -433,7 +435,10 @@ where
                                             move || class_provider.row(i, false, &row_class.get())
                                         ),
                                         Signal::derive(
-                                            move || class_provider.loading_row_inner(&loading_row_inner_class.get())
+                                            move || class_provider.loading_cell(&loading_cell_class.get())
+                                        ),
+                                        Signal::derive(
+                                            move || class_provider.loading_cell_inner(i, &loading_cell_inner_class.get())
                                         ),
                                         i,
                                         Row::COLUMN_COUNT,