Merge pull request #76 from ducktordanny/fix/changelog-loading

Fix: Add loading spinner for changelog content

apps/backend/src/assets/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 > All notable changes to this project will be documented and versioned here.
 
+## [0.10.1] - 2024-01-29
+
+- Fix: Add loading spinner for changelog content
+
 ## [0.10.0] - 2024-01-29
 
 - New page and endpoint for viewing Changelog in English

apps/frontend/src/app/pages/changelog/changelog.module.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 import {MdPreviewModule} from '../../pipes/md-preview/md-preview.module';
@@ -17,6 +18,7 @@ import {ChangelogService} from './changelog.service';
  CommonModule,
  HttpClientModule,
  MatSnackBarModule,
+ MatProgressSpinnerModule,
  MdPreviewModule,
  ],
  exports: [],

apps/frontend/src/app/pages/changelog/changelog.page.ts

@@ -15,6 +15,10 @@ import {ChangelogService} from './changelog.service';
  section {
  padding: 16px;
  }
+
+ mat-spinner {
+ margin: auto;
+ }
  `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,

apps/frontend/src/app/pages/changelog/changelog.template.html

@@ -1,5 +1,10 @@
 <section>
- <p [innerHTML]="changelogContent | async | mdPreview"></p>
+ <div *ngIf="(changelogContent | async) as _changelogContent; else loading">
+ <p [innerHTML]="_changelogContent | mdPreview"></p>
+ </div>
+ <ng-template #loading>
+ <mat-spinner diameter="24"></mat-spinner>
+ </ng-template>
  <a
  href="https://github.com/ducktordanny/opres.help/blob/master/apps/backend/src/assets/CHANGELOG.md"
  >See on GitHub.</a

package.json

@@ -1,6 +1,6 @@
 {
  "name": "opres",
- "version": "0.10.0",
+ "version": "0.10.1",
  "license": "MIT",
  "scripts": {
  "ng": "nx",