Feature/add a skeleton loader to changelog page (#4891)

* Add a skeleton loader to changelog page

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Included quick links in the search results of the assistant
+- Added a skeleton loader to the changelog page
 - Extended the content of the _Self-Hosting_ section by information about additional data providers on the Frequently Asked Questions (FAQ) page
 
 ### Changed

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

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

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

@@ -2,8 +2,51 @@
   <div class="mb-5 row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Changelog</h1>
+
+      @if (isLoading) {
+        <ngx-skeleton-loader
+          animation="pulse"
+          [theme]="{
+            height: '1.5rem',
+            width: '12rem'
+          }"
+        />
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="mt-3"
+          [theme]="{
+            height: '1.25rem',
+            width: '5rem'
+          }"
+        />
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="mt-3"
+          [theme]="{
+            height: '1.25rem',
+            width: '50%'
+          }"
+        />
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="mt-2"
+          [theme]="{
+            height: '1.25rem',
+            width: '75%'
+          }"
+        />
+        <ngx-skeleton-loader
+          animation="pulse"
+          class="mt-2"
+          [theme]="{
+            height: '1.25rem',
+            width: '67%'
+          }"
+        />
+      }
+
       <div class="changelog">
-        <markdown [src]="'../assets/CHANGELOG.md'"></markdown>
+        <markdown [src]="'../assets/CHANGELOG.md'" (load)="onLoad()"></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]
 })