text spinner component

ui/src/app/modals/markdown/markdown.module.ts

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { MarkdownPage } from './markdown.page'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
     SharingModule,
+    TextSpinnerComponentModule,
   ],
   declarations: [MarkdownPage],
 })

ui/src/app/modals/markdown/markdown.page.html

@@ -1,3 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ title | titlecase }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
-  <div [innerHTML]="content | markdown"></div>
+  <text-spinner *ngIf="loading; else loaded" [text]="'fetching ' + title"></text-spinner>
+  <ng-template #loaded>
+    <ion-item *ngIf="error" style="margin-bottom: 16px;">
+      <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
+    </ion-item>
+
+    <div *ngIf="content" class="content-padding" [innerHTML]="content | markdown"></div>
+  </ng-template>
 </ion-content>

ui/src/app/modals/markdown/markdown.page.scss

@@ -0,0 +1,3 @@
+.content-padding {
+  padding: 0 16px 16px 16px
+}

ui/src/app/modals/markdown/markdown.page.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
 
 @Component({
   selector: 'markdown',
@@ -7,12 +8,27 @@ import { ModalController } from '@ionic/angular'
   styleUrls: ['./markdown.page.scss'],
 })
 export class MarkdownPage {
-  @Input() content: string
+  @Input() contentUrl: string
+  @Input() title: string
+  content: string
+  loading = true
+  error = ''
 
   constructor (
     private readonly modalCtrl: ModalController,
+    private readonly apiService: ApiService,
   ) { }
 
+  async ngOnInit () {
+    try {
+      this.content = await this.apiService.getStatic(this.contentUrl)
+    } catch (e) {
+      this.error = e.message
+    } finally {
+      this.loading = false
+    }
+  }
+
   async dismiss () {
     return this.modalCtrl.dismiss(true)
   }