feat(inte): add loading skeleton in sidebar and content

Mezcalito · Jun 17, 2024 · 5113711 · 5113711
1 parent 5212727
commit 5113711
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 4 deletions.
diff --git a/assets/dist/styles.min.css b/assets/dist/styles.min.css
diff --git a/assets/src/scss/01_settings/_settings.colors.scss b/assets/src/scss/01_settings/_settings.colors.scss
@@ -89,4 +89,7 @@ $theme-color: (
   --select-list-bg: var(--color-neutral-white);
   --select-active-bg: #E7F3EB;
   --select-item-hover: var(--color-grey-50);
+
+  --loading-grey: var(--border-grey-100);
+  --loading-grey-light: var(--border-grey-50);
 }
diff --git a/assets/src/scss/04_components/_components.content.scss b/assets/src/scss/04_components/_components.content.scss
@@ -149,4 +149,107 @@
   position: fixed;
   bottom: $space-16;
   right: $space-16;
+}
+
+.fm-c-content__loading {
+  padding: $space-16;
+  display: flex;
+  flex-direction: column;
+  gap: $space-16;
+
+  @include max-width(md) {
+    padding-top: 0;
+    gap: $space-12;
+  }
+}
+
+.fm-c-content__loader {
+  background: var(--loading-grey);
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+
+.fm-c-content__loader::before{
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+  animation: loading 1s infinite;
+  background: linear-gradient(to right, transparent,var(--loading-grey-light),transparent);
+}
+
+@keyframes loading {
+  0%{
+    transform: translateX(-100%);
+  }
+  100%{
+    transform: translateX(100%);
+  }
+}
+
+.fm-c-content__loading-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: $space-12;
+  height: 4.2rem;
+
+  @include max-width(md) {
+    height: 4rem;
+  }
+
+  @include min-width(md) {
+    flex-wrap: wrap;
+  }
+
+  & > div {
+    display: flex;
+    gap: $space-10;
+
+    @include max-width(md) {
+      display: none;
+    }
+  }
+
+  .fm-c-content__loader {
+    border-radius: var(--radius-md);
+  }
+}
+
+.fm-c-content__search-loader {
+  width: 20rem;
+
+  @include max-width(md) {
+    flex: 1;
+  }
+}
+
+.fm-c-content__box-loader {
+  width: 12rem;
+}
+
+.fm-c-content__format-loader {
+  width: 7rem;
+
+  @include max-width(md) {
+    display: none;
+  }
+}
+
+.fm-c-content__format-loader-mob {
+  width: 4rem;
+
+  @include min-width(md) {
+    display: none;
+  }
+}
+
+.fm-c-content__bars-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.fm-c-content__bar-loader {
+  width: 100%;
+  height: 7.2rem;
 }
diff --git a/assets/src/scss/04_components/_components.layout.scss b/assets/src/scss/04_components/_components.layout.scss
@@ -1,9 +1,13 @@
-.fm-clayout {
+.fm-c-layout {
   display: grid;
   grid-template-columns: 24rem 1fr;
   height: 100%;
 
   @include max-width(md) {
     grid-template-columns: 1fr;
   }
+
+  &:has(.fm-c-sidebar__loading) {
+    height: auto;
+  }
 }
diff --git a/assets/src/scss/04_components/_components.sidebar.scss b/assets/src/scss/04_components/_components.sidebar.scss
@@ -12,3 +12,52 @@
     padding: 0;
   }
 }
+
+
+.fm-c-sidebar__loading {
+  padding: $space-16;
+  display: flex;
+  flex-direction: column;
+  gap: $space-10;
+
+  .fm-c-sidebar__bar-loader:first-child {
+    width: 50%;
+    margin-left: 0;
+
+    @include max-width(md) {
+      width: 30%;
+    }
+  }
+
+  @include max-width(md) {
+    .fm-c-sidebar__bar-loader:not(:first-child) {
+      display: none;
+    }
+  }
+}
+
+.fm-c-sidebar__bar-loader {
+  margin-left: $space-16;
+  height: 2.8rem;
+  background: var(--loading-grey);
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+
+.fm-c-sidebar__bar-loader::before{
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+  animation: loading 1s infinite;
+  background: linear-gradient(to right, transparent,var(--loading-grey-light),transparent);
+}
+
+@keyframes loading {
+  0%{
+    transform: translateX(-100%);
+  }
+  100%{
+    transform: translateX(100%);
+  }
+}
diff --git a/src/Twig/Components/Content.php b/src/Twig/Components/Content.php
@@ -19,6 +19,7 @@
 use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemToolsTrait;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\Attribute\PreReRender;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
@@ -55,4 +56,10 @@ public function getContent(): array
 
         return $nodes;
     }
+
+    #[PreReRender]
+    public function preReRender(): void
+    {
+        sleep(5);
+    }
 }
diff --git a/src/Twig/Components/Sidebar.php b/src/Twig/Components/Sidebar.php
@@ -17,6 +17,7 @@
 use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemContextTrait;
 use Mezcalito\FileManagerBundle\Twig\Trait\FilesystemToolsTrait;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\PreReRender;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 
@@ -36,4 +37,10 @@ public function getNodes(): array
 
         return $nodes;
     }
+
+    #[PreReRender]
+    public function preReRender(): void
+    {
+        sleep(5);
+    }
 }
diff --git a/templates/components/content.html.twig b/templates/components/content.html.twig
@@ -186,5 +186,22 @@
 </div>
 
 {% macro placeholder(props) %}
-    Loading... Please wait...
+    <div class='fm-c-content__loading'>
+        <div class='fm-c-content__loading-actions'>
+            <span class='fm-c-content__search-loader fm-c-content__loader'></span>
+            <div>
+                <span class='fm-c-content__box-loader fm-c-content__loader'></span>
+                <span class='fm-c-content__box-loader fm-c-content__loader'></span>
+                <span class='fm-c-content__box-loader fm-c-content__loader'></span>
+            </div>
+            <span class='fm-c-content__format-loader fm-c-content__loader'></span>
+            <span class='fm-c-content__format-loader-mob fm-c-content__loader'></span>
+        </div>
+        <div class='fm-c-content__bars-container'>
+            <span class='fm-c-content__bar-loader fm-c-content__loader'></span>
+            <span class='fm-c-content__bar-loader fm-c-content__loader'></span>
+            <span class='fm-c-content__bar-loader fm-c-content__loader'></span>
+            <span class='fm-c-content__bar-loader fm-c-content__loader'></span>
+        </div>
+    </div>
 {% endmacro %}
diff --git a/templates/components/sidebar.html.twig b/templates/components/sidebar.html.twig
@@ -58,5 +58,10 @@
 {% endmacro %}
 
 {% macro placeholder(props) %}
-    Loading... Please wait...
+    <div class='fm-c-sidebar__loading'>
+        <span class='fm-c-sidebar__bar-loader'></span>
+        <span class='fm-c-sidebar__bar-loader'></span>
+        <span class='fm-c-sidebar__bar-loader'></span>
+        <span class='fm-c-sidebar__bar-loader'></span>
+    </div>
 {% endmacro %}