diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 23e8b18d8..2e45e3b41 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/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',
},
},
{
diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html
index 6f2b09693..7120cae70 100644
--- a/apps/red-ui/src/app/app.component.html
+++ b/apps/red-ui/src/app/app.component.html
@@ -5,3 +5,9 @@
+
+
+
+
+
+
diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 3c25bae90..399d01523 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/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,
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
new file mode 100644
index 000000000..2f89e274d
--- /dev/null
+++ b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.scss
new file mode 100644
index 000000000..50f65e0b7
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts b/apps/red-ui/src/app/components/dashboard-skeleton/dashboard-skeleton.component.ts
new file mode 100644
index 000000000..67c47d282
--- /dev/null
+++ b/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 {}
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html
new file mode 100644
index 000000000..e83646bf0
--- /dev/null
+++ b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html
@@ -0,0 +1,15 @@
+
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.scss
new file mode 100644
index 000000000..02e36c560
--- /dev/null
+++ b/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;
+}
diff --git a/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts b/apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts
new file mode 100644
index 000000000..1ac32cbd5
--- /dev/null
+++ b/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) {}
+}
diff --git a/libs/common-ui b/libs/common-ui
index cb3f1e3ee..a786f06e8 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit cb3f1e3eea6353711d2e5bdfe8664b1b4b8e70e2
+Subproject commit a786f06e8c2de98a21c02e3445d5c415dc05b279