feat(changelog): add skeleton loader to changelog page

apps/client/src/app/pages/about/changelog/changelog-page.component.ts

@@ -8,10 +8,15 @@ import { Subject } from 'rxjs';
   standalone: false
 })
 export class ChangelogPageComponent implements OnDestroy {
+  public isLoading = true;
   private unsubscribeSubject = new Subject<void>();
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
+
+  public onLoad() {
+    this.isLoading = false;
+  }
 }

apps/client/src/app/pages/about/changelog/changelog-page.html

@@ -2,8 +2,38 @@
   <div class="mb-5 row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Changelog</h1>
-      <div class="changelog">
-        <markdown [src]="'../assets/CHANGELOG.md'"></markdown>
+
+      <div *ngIf="isLoading">
+        <ngx-skeleton-loader
+          [theme]="{
+            'border-radius': '0.25rem',
+            height: '22px',
+            width: '35%'
+          }"
+        ></ngx-skeleton-loader>
+        <ngx-skeleton-loader
+          [theme]="{
+            'border-radius': '0.25rem',
+            height: '22px',
+            'margin-top': '0.5rem',
+            width: '15%'
+          }"
+        ></ngx-skeleton-loader>
+        <ngx-skeleton-loader
+          [theme]="{
+            'border-radius': '0.25rem',
+            height: '22px',
+            'margin-top': '0.5rem',
+            width: '65%'
+          }"
+        ></ngx-skeleton-loader>
+      </div>
+
+      <div class="changelog" *ngIf="!isLoading">
+        <markdown
+          (load)="onLoad()"
+          [src]="'../assets/CHANGELOG.md'"
+        ></markdown>
       </div>
     </div>
   </div>

apps/client/src/app/pages/about/changelog/changelog-page.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MarkdownModule } from 'ngx-markdown';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
 import { ChangelogPageComponent } from './changelog-page.component';
@@ -10,7 +11,8 @@ import { ChangelogPageComponent } from './changelog-page.component';
   imports: [
     ChangelogPageRoutingModule,
     CommonModule,
-    MarkdownModule.forChild()
+    MarkdownModule.forChild(),
+    NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })