diff --git a/CHANGELOG.md b/CHANGELOG.md
index b39008271..10a47480f 100644
--- a/CHANGELOG.md
+++ b/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
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..bdf6f52f1 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,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();
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..60b146df5 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,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>
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]
 })