replace header profile picture skeleton

Author: mckenziearts

src/app/shared/themes/components/header/header.component.html

@@ -161,16 +161,9 @@
               aria-haspopup="true"
               (click)="toggleMobileMenu()">
               <span class="sr-only" i18n>Ouvrir le menu utilisateur</span>
-              <!-- <ngx-skeleton-loader
-                *ngIf="(user$ | async) === null"
-                appearance="circle"
-                [theme]="{
-                  'border-radius': '999px',
-                  height: '32px',
-                  width: '32px',
-                  margin: 0
-                }">
-              </ngx-skeleton-loader> -->
+              <skeleton *ngIf="(user$ | async) === null">
+                <div class="w-8 h-8 bg-gray-100 rounded-full dark:bg-gray-700"></div>
+              </skeleton>
               <img *ngIf="user$ | async; let user" class="w-8 h-8 rounded-full" [src]="user.profilePhotoUrl" [alt]="user.name" />
             </button>
             <div

src/app/shared/themes/theme.module.ts

@@ -6,6 +6,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRippleModule } from '@angular/material/core';
 import { NgxPermissionsModule } from 'ngx-permissions';
 
+import { SkeletonModule } from '../components/skeletons/skeleton.module';
+
 import { AuthComponent } from './layouts/auth/auth.component';
 import { CpanelComponent } from './layouts/cpanel/cpanel.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
@@ -19,6 +21,7 @@ const MODULES = [
   MatProgressBarModule,
   MatSlideToggleModule,
   MatRippleModule,
+  SkeletonModule,
 ];
 
 @NgModule({