From 36aa594461000d0c6334dcdb6621b569022fa25f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 29 Nov 2022 04:14:54 +0200
Subject: [PATCH] Skeleton loading animation, cleanup, more sizes

---
 src/assets/styles/common-loading.scss           |  8 ++++++++
 src/assets/styles/common-utilities.scss         |  4 ++--
 src/lib/skeleton/skeleton/skeleton.component.ts | 15 +++++----------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/assets/styles/common-loading.scss b/src/assets/styles/common-loading.scss
index 7f93ba9..73f4335 100644
--- a/src/assets/styles/common-loading.scss
+++ b/src/assets/styles/common-loading.scss
@@ -45,3 +45,11 @@
         transform: rotate(-360deg);
     }
 }
+
+@keyframes fadeIn {
+    from { opacity: 0.4; }
+}
+
+.animate-flicker {
+    animation: fadeIn 0.8s infinite alternate;
+}
diff --git a/src/assets/styles/common-utilities.scss b/src/assets/styles/common-utilities.scss
index 7234cf6..efa6c76 100644
--- a/src/assets/styles/common-utilities.scss
+++ b/src/assets/styles/common-utilities.scss
@@ -47,7 +47,7 @@ $sides: (top, bottom, left, right);
 
 /* sk-w-${n} (in pixels) */
 
-$skeleton-widths: (120, 200, 250, 340);
+$skeleton-widths: (12, 110, 200, 250, 340);
 @each $w in $skeleton-widths {
     .sk-w-#{$w} {
         max-width: #{$w}px;
@@ -56,7 +56,7 @@ $skeleton-widths: (120, 200, 250, 340);
 
 /* sk-h-${n} */
 
-$skeleton-heights: (12, 20, 24);
+$skeleton-heights: (6, 8, 12, 20, 24);
 @each $h in $skeleton-heights {
     .sk-h-#{$h} {
         height: #{$h}px;
diff --git a/src/lib/skeleton/skeleton/skeleton.component.ts b/src/lib/skeleton/skeleton/skeleton.component.ts
index a93a858..addec7f 100644
--- a/src/lib/skeleton/skeleton/skeleton.component.ts
+++ b/src/lib/skeleton/skeleton/skeleton.component.ts
@@ -9,21 +9,16 @@ import { SkeletonService } from '../../services';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SkeletonComponent {
-    x$ = new BehaviorSubject<string | null>('Dashboard');
-    @HostBinding('style.display') display = 'block';
-
     @Input() templates: Record<string, TemplateRef<unknown>> = {};
-
-    // @HostBinding('style.display') display = 'none';
+    @HostBinding('style.display') display = 'none';
 
     constructor(private readonly _skeletonService: SkeletonService) {
-        // this._skeletonService.type$.subscribe(type => {
-        //     this.display = type ? 'block' : 'none';
-        // });
+        this._skeletonService.type$.subscribe(type => {
+            this.display = type ? 'block' : 'none';
+        });
     }
 
     get type$(): BehaviorSubject<string | null> {
-        return this.x$;
-        // return this._skeletonService.type$;
+        return this._skeletonService.type$;
     }
 }