From 6bdf815895ce2905aa2cb288cff4ffb3b7ee58fb Mon Sep 17 00:00:00 2001
From: Fabio Carlos <fabarlos98@gmail.com>
Date: Wed, 11 Jun 2025 01:07:26 -0600
Subject: [PATCH] feat(changelog): add skeleton loader to changelog page

---
 .../changelog/changelog-page.component.ts     |  5 +++
 .../pages/about/changelog/changelog-page.html | 34 +++++++++++++++++--
 .../about/changelog/changelog-page.module.ts  |  4 ++-
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
index d086b70e3..b270b258f 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
+++ b/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;
+  }
 }
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.html b/apps/client/src/app/pages/about/changelog/changelog-page.html
index 0a333f073..1a304a6cc 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.html
+++ b/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>
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.module.ts b/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
index 6c187824f..e81e6805f 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
+++ b/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]
 })