From aa3a52b4b28a2bb7bf8665149c534b0dfad69ce0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 29 Nov 2022 04:17:10 +0200
Subject: [PATCH] RED-5085: Done skeleton loading on dashboard

---
 apps/red-ui/src/app/app.module.ts             |  2 +-
 .../dashboard-skeleton.component.html         | 17 ------------
 .../dashboard-skeleton.component.html         | 27 +++++++++++++++++++
 .../dashboard-skeleton.component.scss         | 22 +++++++--------
 .../dashboard-skeleton.component.ts           |  0
 .../src/app/modules/icons/icons.module.ts     |  1 +
 .../icons/general/skeleton-template-stats.svg |  6 +++++
 7 files changed, 45 insertions(+), 30 deletions(-)
 delete mode 100644 apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html
 create mode 100644 apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html
 rename apps/red-ui/src/app/components/{ => skeleton}/dashboard-skeleton/dashboard-skeleton.component.scss (82%)
 rename apps/red-ui/src/app/components/{ => skeleton}/dashboard-skeleton/dashboard-skeleton.component.ts (100%)
 create mode 100644 apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 399d01523..040277809 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -28,7 +28,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '@environments/environment';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { NotificationsComponent } from '@components/notifications/notifications.component';
-import { DashboardSkeletonComponent } from '@components/dashboard-skeleton/dashboard-skeleton.component';
+import { DashboardSkeletonComponent } from '@components/skeleton/dashboard-skeleton/dashboard-skeleton.component';
 import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SharedModule } from '@shared/shared.module';
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html
deleted file mode 100644
index 2f89e274d..000000000
--- a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<redaction-skeleton-top-bar></redaction-skeleton-top-bar>
-
-<div class="overlay-shadow"></div>
-
-<div class="container">
-    <div class="skeleton line sk-h-24 sk-w-250 mb-20"></div>
-    <div class="skeleton line sk-h-12 sk-w-340 mb-32"></div>
-
-    <div *ngFor="let template of [].constructor(3)" class="dialog">
-        <div class="flex-2">
-            <div class="skeleton line sk-h-20 sk-w-200 mb-16"></div>
-            <div *ngFor="let line of [].constructor(4)" class="skeleton line sk-h-12 sk-w-120 mb-16"></div>
-        </div>
-        <div class="flex-3"></div>
-        <div class="flex-3"></div>
-    </div>
-</div>
diff --git a/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html
new file mode 100644
index 000000000..b7fd59ae4
--- /dev/null
+++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.html
@@ -0,0 +1,27 @@
+<redaction-skeleton-top-bar></redaction-skeleton-top-bar>
+
+<div class="overlay-shadow"></div>
+
+<div class="container animate-flicker">
+    <div class="skeleton-line sk-h-24 sk-w-250 mb-20"></div>
+    <div class="skeleton-line sk-h-12 sk-w-340 mb-32"></div>
+
+    <div *ngFor="let template of [].constructor(3)" class="dialog">
+        <div class="flex-2">
+            <div class="skeleton-line sk-h-20 sk-w-200 mb-16"></div>
+            <div *ngFor="let line of [].constructor(4)" class="skeleton-line sk-h-12 sk-w-110 mb-16"></div>
+        </div>
+        <div class="flex-3 row align-center" *ngFor="let column of [].constructor(2)">
+            <div class="flex-1 mr-16">
+                <mat-icon svgIcon="red:skeleton-template-stats"></mat-icon>
+            </div>
+
+            <div class="flex-1">
+                <div class="mb-16 d-flex align-center" *ngFor="let line of [].constructor(4)">
+                    <div class="flex-1 skeleton-line sk-h-6 sk-w-12 mr-10"></div>
+                    <div class="flex-1 skeleton-line sk-h-8 sk-w-110"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss
similarity index 82%
rename from apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss
rename to apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss
index 50f65e0b7..25ba98779 100644
--- a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss
+++ b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.scss
@@ -15,12 +15,14 @@
     }
 }
 
-.skeleton {
+.skeleton-line {
     background-color: var(--iqser-grey-4);
+    border-radius: 12px;
+}
 
-    &.line {
-        border-radius: 12px;
-    }
+mat-icon {
+    width: unset;
+    height: unset;
 }
 
 .dialog {
@@ -39,13 +41,9 @@
             justify-content: center;
             border-left: 1px solid var(--iqser-separator);
         }
-    }
-}
-
-.stats-subtitle {
-    flex-direction: column;
-
-    > div {
-        margin-top: 10px;
+
+        &.row {
+            flex-direction: row;
+        }
     }
 }
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts b/apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts
similarity index 100%
rename from apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts
rename to apps/red-ui/src/app/components/skeleton/dashboard-skeleton/dashboard-skeleton.component.ts
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 9b1eeb327..c62acabbc 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -68,6 +68,7 @@ export class IconsModule {
             'rss',
             'rule',
             'secret',
+            'skeleton-template-stats',
             'status',
             'status-info',
             'template',
diff --git a/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg b/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg
new file mode 100644
index 000000000..7ef7ac10b
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/skeleton-template-stats.svg
@@ -0,0 +1,6 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9993 0C124.182 0 160 35.817 160 80C160 124.183 124.182 160 79.9993 160C35.817 160 0 124.183 0 80C0 35.817 35.817 0 79.9993 0ZM80.1281 15.4951C44.7254 15.4951 16.0257 44.1948 16.0257 79.5981C16.0257 115.001 44.7254 143.701 80.1281 143.701C115.531 143.701 144.232 115.001 144.232 79.5981C144.232 44.1948 115.531 15.4951 80.1281 15.4951Z" fill="#E2E4E9"/>
+<path d="M122 92.5H34C30.6863 92.5 28 95.1863 28 98.5C28 101.814 30.6863 104.5 34 104.5H122C125.314 104.5 128 101.814 128 98.5C128 95.1863 125.314 92.5 122 92.5Z" fill="#E2E4E9"/>
+<path d="M88.5 60.5H71.5C64.8726 60.5 59.5 65.8726 59.5 72.5C59.5 79.1274 64.8726 84.5 71.5 84.5H88.5C95.1274 84.5 100.5 79.1274 100.5 72.5C100.5 65.8726 95.1274 60.5 88.5 60.5Z" fill="#E2E4E9"/>
+</svg>
+