RED-5085: Skeleton loader WIP (Dashboard)

apps/red-ui/src/app/app-routing.module.ts

@@ -119,9 +119,9 @@ const routes: IqserRoutes = [
             {
                 path: 'dashboard',
                 loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
-                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                canActivate: [CompositeRouteGuard],
                 data: {
-                    routeGuards: [IqserAuthGuard, RedRoleGuard, DossierTemplatesGuard, DashboardGuard],
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, IqserPermissionsGuard, DossierTemplatesGuard, DashboardGuard],
                     permissions: {
                         allow: [
                             ROLES.any,
@@ -140,6 +140,7 @@ const routes: IqserRoutes = [
                             [DEFAULT_REDIRECT_KEY]: '/auth-error',
                         },
                     },
+                    skeleton: 'Dashboard',
                 },
             },
             {

apps/red-ui/src/app/app.component.html

@@ -5,3 +5,9 @@
 <iqser-full-page-loading-indicator></iqser-full-page-loading-indicator>
 <iqser-connection-status></iqser-connection-status>
 <iqser-full-page-error></iqser-full-page-error>
+
+<iqser-skeleton [templates]="{ Dashboard: Dashboard }"></iqser-skeleton>
+
+<ng-template #Dashboard>
+    <redaction-dashboard-skeleton></redaction-dashboard-skeleton>
+</ng-template>

apps/red-ui/src/app/app.module.ts

@@ -14,6 +14,7 @@ import {
     IqserLoadingModule,
     IqserPermissionsModule,
     IqserPermissionsService,
+    IqserSharedModule,
     IqserTranslateModule,
     IqserUsersModule,
     LanguageService,
@@ -27,6 +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 { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SharedModule } from '@shared/shared.module';
@@ -59,10 +61,20 @@ import { LicenseService } from '@services/license.service';
 import { TenantIdInterceptor } from '@utils/tenant-id-interceptor';
 import { UI_CACHES } from '@utils/constants';
 import { RedRoleGuard } from '@users/red-role.guard';
+import { SkeletonTopBarComponent } from '@components/skeleton/skeleton-top-bar/skeleton-top-bar.component';
 
 const screens = [BaseScreenComponent, DownloadsListScreenComponent];
 
-const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens];
+const components = [
+    AppComponent,
+    AuthErrorComponent,
+    NotificationsComponent,
+    SpotlightSearchComponent,
+    BreadcrumbsComponent,
+    DashboardSkeletonComponent,
+    SkeletonTopBarComponent,
+    ...screens,
+];
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
@@ -83,6 +95,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 existingUserService: UserService,
                 existingRoleGuard: RedRoleGuard,
             }),
+            IqserSharedModule,
             CachingModule.forRoot(UI_CACHES),
             IqserHelpModeModule.forRoot(links),
             PdfViewerModule,

apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html

@@ -0,0 +1,17 @@
+<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>

apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss

@@ -0,0 +1,51 @@
+@use 'common-mixins';
+
+:host {
+    min-height: 100vh;
+    background-color: var(--iqser-alt-background);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .container {
+        padding: 32px;
+        width: 900px;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+.skeleton {
+    background-color: var(--iqser-grey-4);
+
+    &.line {
+        border-radius: 12px;
+    }
+}
+
+.dialog {
+    flex-direction: row;
+    max-width: unset;
+    min-height: unset;
+    margin: 0 0 16px 0;
+
+    > div {
+        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        &:not(:first-child) {
+            justify-content: center;
+            border-left: 1px solid var(--iqser-separator);
+        }
+    }
+}
+
+.stats-subtitle {
+    flex-direction: column;
+
+    > div {
+        margin-top: 10px;
+    }
+}

apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'redaction-dashboard-skeleton',
+    templateUrl: './dashboard-skeleton.component.html',
+    styleUrls: ['./dashboard-skeleton.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardSkeletonComponent {}

apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html

@@ -0,0 +1,15 @@
+<div class="top-bar">
+    <div class="flex-2 visible-lg breadcrumbs-container">
+        <a [translate]="'top-bar.navigation-items.dashboard'" class="breadcrumb active"></a>
+    </div>
+    <a class="logo">
+        <div class="actions">
+            <iqser-logo icon="red:logo"></iqser-logo>
+            <div class="app-name">{{ titleService.getTitle() }}</div>
+        </div>
+    </a>
+
+    <div class="actions flex-2">
+        <iqser-user-button id="userMenu"></iqser-user-button>
+    </div>
+</div>

apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss

@@ -0,0 +1,9 @@
+:host {
+    display: contents;
+}
+
+.top-bar .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}

apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+@Component({
+    selector: 'redaction-skeleton-top-bar',
+    templateUrl: './skeleton-top-bar.component.html',
+    styleUrls: ['./skeleton-top-bar.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonTopBarComponent {
+    constructor(readonly titleService: Title) {}
+}

libs/common-ui

@@ -1 +1 @@
-Subproject commit cb3f1e3eea6353711d2e5bdfe8664b1b4b8e70e2
+Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279