fix(changelog): add loading spinner for content

ducktordanny · Jan 29, 2024 · acc9107 · acc9107
1 parent cc8de28
commit acc9107
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/apps/frontend/src/app/pages/changelog/changelog.module.ts b/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: [],

diff --git a/apps/frontend/src/app/pages/changelog/changelog.page.ts b/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,

diff --git a/apps/frontend/src/app/pages/changelog/changelog.template.html b/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