[frontend] Add spinner when loading

kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html

@@ -10,9 +10,10 @@
         <mat-icon>add</mat-icon>
       </button>
     </form>
-    <ng-container *ngIf="badwords$ | async as badwords">
-      <mat-list *ngIf="badwords.length !== 0; else empty">
-        <mat-list-item *ngFor="let badword of badwords">
+    <ng-container *ngIf="badwords$ | loading | async as badwords">
+      <ng-template [ngIf]="badwords.value">
+        <mat-list *ngIf="badwords.value.length !== 0; else empty">
+          <mat-list-item *ngFor="let badword of badwords.value">
             <div class="entry">
               <div class="regex">
                 {{ badword.pattern }}
@@ -39,11 +40,16 @@
             <mat-divider></mat-divider>
           </mat-list-item>
         </mat-list>
-    </ng-container>
         <ng-template #empty>
-      <div class="error-msg">
-        No badwords configured yet.
-      </div>
+          <div class="error-msg">No badwords configured yet.</div>
         </ng-template>
+      </ng-template>
+      <ng-template [ngIf]="badwords.error"
+        ><mat-icon class="warning">warning</mat-icon></ng-template
+      >
+      <ng-template [ngIf]="badwords.loading">
+        <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+      </ng-template>
+    </ng-container>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html

@@ -10,9 +10,10 @@
         <mat-icon>add</mat-icon>
       </button>
     </form>
-    <ng-container *ngIf="triggers$ | async as triggers">
-      <mat-list *ngIf="triggers.length !== 0; else empty">
-        <mat-list-item *ngFor="let trigger of triggers">
+    <ng-container *ngIf="triggers$ | loading | async as triggers">
+      <ng-template [ngIf]="triggers.value">
+        <mat-list *ngIf="triggers.value.length !== 0; else empty">
+          <mat-list-item *ngFor="let trigger of triggers.value">
             <div class="entry">
               <div class="regex">
                 {{ trigger.pattern }}
@@ -39,11 +40,16 @@
             <mat-divider></mat-divider>
           </mat-list-item>
         </mat-list>
-    </ng-container>
         <ng-template #empty>
-      <div class="error-msg">
-        No triggers configured yet.
-      </div>
+          <div class="error-msg">No triggers configured yet.</div>
         </ng-template>
+      </ng-template>
+      <ng-template [ngIf]="triggers.error"
+        ><mat-icon class="warning">warning</mat-icon></ng-template
+      >
+      <ng-template [ngIf]="triggers.loading">
+        <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+      </ng-template>
+    </ng-container>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -7,11 +7,13 @@
       technology for your community to florish!
     </p>
     <div class="hoods-container">
+      <ng-container *ngIf="hoods$ | loading | async as hoods">
+        <ng-template [ngIf]="hoods.value">
           <mat-selection-list [multiple]="false">
             <div mat-subheader>Configure your hoods</div>
             <mat-divider></mat-divider>
             <a
-          *ngFor="let hood of hoods$ | async"
+              *ngFor="let hood of hoods.value"
               [routerLink]="['/dashboard/hoods', hood.id]"
               matTooltip="Edit settings of {{ hood.name }}"
             >
@@ -28,7 +30,7 @@
           </mat-selection-list>
           <mat-list>
             <div mat-subheader></div>
-        <mat-list-item *ngFor="let hood of hoods$ | async">
+            <mat-list-item *ngFor="let hood of hoods.value">
               <a
                 [routerLink]="['/hoods', hood.id]"
                 target="_blank"
@@ -38,6 +40,14 @@
               </a>
             </mat-list-item>
           </mat-list>
+        </ng-template>
+        <ng-template [ngIf]="hoods.error"
+          ><mat-icon class="warning">warning</mat-icon></ng-template
+        >
+        <ng-template [ngIf]="hoods.loading">
+          <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+        </ng-template>
+      </ng-container>
     </div>
 
     <button

kibicara-frontend/src/app/platforms/email/email-bot-card/email-bot-card.component.html

@@ -1,5 +1,6 @@
-<div *ngIf="emails$ | async as emails">
-  <mat-card *ngIf="emails.length !== 0">
+<div *ngIf="emails$ | loading | async as emails">
+  <ng-template [ngIf]="emails.value">
+    <mat-card>
       <mat-card-header>
         <div mat-card-avatar class="email"></div>
         <mat-card-title class="platform-title">
@@ -14,14 +15,19 @@
           </button>
         </mat-card-title>
       </mat-card-header>
-    <mat-card-content>
+      <mat-card-content *ngIf="emails.value.length !== 0; else noEmail">
         <h3>Subscribe to E-Mail list:</h3>
         <form class="input" [formGroup]="form" (ngSubmit)="onSubmit()">
           <mat-form-field>
             <mat-label>Your E-Mail</mat-label>
             <input formControlName="email" matInput />
           </mat-form-field>
-        <button mat-icon-button color="primary" aria-label="Add" class="button">
+          <button
+            mat-icon-button
+            color="primary"
+            aria-label="Add"
+            class="button"
+          >
             <mat-icon>person_add</mat-icon>
           </button>
         </form>
@@ -29,7 +35,7 @@
         <h3>Send e-mail to hood:</h3>
         <mat-selection-list [multiple]="false" class="list">
           <a
-          *ngFor="let email of emails"
+            *ngFor="let email of emails.value"
             href="mailto:{{ email.name }}@{{ emailDomain }}"
           >
             <mat-list-option>
@@ -40,4 +46,16 @@
         </mat-selection-list>
       </mat-card-content>
     </mat-card>
+    <ng-template #noEmail>
+      <mat-card-content>
+        Unfortunately your hood admin has not configured E-Mail as platform yet.
+      </mat-card-content>
+    </ng-template>
+  </ng-template>
+  <ng-template [ngIf]="emails.error"
+    ><mat-icon class="warning">warning</mat-icon></ng-template
+  >
+  <ng-template [ngIf]="emails.loading">
+    <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+  </ng-template>
 </div>

kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html

@@ -14,8 +14,9 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <mat-list *ngIf="emails$ | async as emails">
-      <mat-list-item *ngIf="emails.length === 0; else startButton">
+    <mat-list *ngIf="emails$ | loading | async as emails">
+      <ng-template [ngIf]="emails.value">
+        <mat-list-item *ngIf="emails.value.length === 0; else startButton">
           <button mat-menu-item (click)="onCreate()">
             <mat-icon>add</mat-icon>
             <span> Add a platform connection!</span>
@@ -35,7 +36,7 @@
             <mat-divider></mat-divider>
           </mat-list-item>
         </ng-template>
-      <mat-list-item *ngFor="let email of emails">
+        <mat-list-item *ngFor="let email of emails.value">
           <div class="entry">
             {{ email.name }}@{{ domain }}
             <button
@@ -58,6 +59,13 @@
             </button>
           </mat-menu>
         </mat-list-item>
+      </ng-template>
+      <ng-template [ngIf]="emails.error"
+        ><mat-icon class="warning">warning</mat-icon></ng-template
+      >
+      <ng-template [ngIf]="emails.loading">
+        <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+      </ng-template>
     </mat-list>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/platforms/telegram/telegram-bot-card/telegram-bot-card.component.html

@@ -1,5 +1,6 @@
-<div *ngIf="telegrams$ | async as telegrams">
-  <mat-card *ngIf="telegrams.length !== 0">
+<div *ngIf="telegrams$ | loading | async as telegrams">
+  <ng-template [ngIf]="telegrams.value">
+    <mat-card>
       <mat-card-header>
         <div mat-card-avatar class="telegram"></div>
         <mat-card-title class="platform-title">
@@ -14,10 +15,10 @@
           </button>
         </mat-card-title>
       </mat-card-header>
-    <mat-card-content>
+      <mat-card-content *ngIf="telegrams.value.length !== 0; else noTelegram">
         <mat-selection-list [multiple]="false" class="list">
           <a
-          *ngFor="let telegram of telegrams"
+            *ngFor="let telegram of telegrams.value"
             href="https://t.me/{{ telegram.username }}"
             routerLinkActive="router-link-active"
           >
@@ -29,4 +30,17 @@
         </mat-selection-list>
       </mat-card-content>
     </mat-card>
+    <ng-template #noTelegram>
+      <mat-card-content>
+        Unfortunately your hood admin has not configured Telegram as platform
+        yet.
+      </mat-card-content>
+    </ng-template>
+  </ng-template>
+  <ng-template [ngIf]="telegrams.error"
+    ><mat-icon class="warning">warning</mat-icon></ng-template
+  >
+  <ng-template [ngIf]="telegrams.loading">
+    <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+  </ng-template>
 </div>

kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html

@@ -14,15 +14,16 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <mat-list *ngIf="telegrams$ | async as telegrams">
-      <mat-list-item *ngIf="telegrams.length === 0">
+    <mat-list *ngIf="telegrams$ | loading | async as telegrams">
+      <ng-template [ngIf]="telegrams.value">
+        <mat-list-item *ngIf="telegrams.value.length === 0">
           <button mat-menu-item (click)="onCreate()">
             <mat-icon>add</mat-icon>
             <span> Add a platform connection!</span>
           </button>
           <mat-divider></mat-divider>
         </mat-list-item>
-      <mat-list-item *ngFor="let telegram of telegrams">
+        <mat-list-item *ngFor="let telegram of telegrams.value">
           <div class="entry">
             @{{ telegram.username }}
             <mat-slide-toggle
@@ -53,6 +54,13 @@
             </button>
           </mat-menu>
         </mat-list-item>
+      </ng-template>
+      <ng-template [ngIf]="telegrams.error"
+        ><mat-icon class="warning">warning</mat-icon></ng-template
+      >
+      <ng-template [ngIf]="telegrams.loading">
+        <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+      </ng-template>
     </mat-list>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html

@@ -1,5 +1,6 @@
-<div *ngIf="twitters$ | async as twitters">
-  <mat-card *ngIf="twitters.length !== 0">
+<div *ngIf="twitters$ | loading | async as twitters">
+  <ng-template [ngIf]="twitters.value">
+    <mat-card>
       <mat-card-header>
         <div mat-card-avatar class="twitter"></div>
         <mat-card-title class="platform-title">
@@ -14,10 +15,10 @@
           </button>
         </mat-card-title>
       </mat-card-header>
-    <mat-card-content>
+      <mat-card-content *ngIf="twitters.value.length !== 0; else noTwitter">
         <mat-selection-list [multiple]="false" class="list">
           <a
-          *ngFor="let twitter of twitters"
+            *ngFor="let twitter of twitters.value"
             href="https://twitter.com/{{ twitter.username }}"
             routerLinkActive="router-link-active"
           >
@@ -29,4 +30,17 @@
         </mat-selection-list>
       </mat-card-content>
     </mat-card>
+    <ng-template #noTwitter>
+      <mat-card-content>
+        Unfortunately your hood admin has not configured Twitter as platform
+        yet.
+      </mat-card-content>
+    </ng-template>
+  </ng-template>
+  <ng-template [ngIf]="twitters.error"
+    ><mat-icon class="warning">warning</mat-icon></ng-template
+  >
+  <ng-template [ngIf]="twitters.loading">
+    <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+  </ng-template>
 </div>

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html

@@ -14,15 +14,16 @@
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <mat-list *ngIf="twitters$ | async as twitters">
-      <mat-list-item *ngIf="(twitters | twitterCorpses).length === 0">
+    <mat-list *ngIf="twitters$ | loading | async as twitters">
+      <ng-template [ngIf]="twitters.value">
+        <mat-list-item *ngIf="(twitters.value | twitterCorpses).length === 0">
           <button mat-menu-item (click)="onCreate()">
             <mat-icon>add</mat-icon>
             <span> Add a platform connection!</span>
           </button>
           <mat-divider></mat-divider>
         </mat-list-item>
-      <mat-list-item *ngFor="let twitter of twitters | twitterCorpses">
+        <mat-list-item *ngFor="let twitter of twitters.value | twitterCorpses">
           <div class="entry">
             @{{ twitter.username }}
             <mat-slide-toggle
@@ -49,6 +50,13 @@
             </button>
           </mat-menu>
         </mat-list-item>
+      </ng-template>
+      <ng-template [ngIf]="twitters.error"
+        ><mat-icon class="warning">warning</mat-icon></ng-template
+      >
+      <ng-template [ngIf]="twitters.loading">
+        <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+      </ng-template>
     </mat-list>
   </mat-card-content>
 </mat-card>

kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html

@@ -1,8 +1,9 @@
-<app-heading-one [title]="hood.name"></app-heading-one>
-<div class="public-margin container">
+<ng-container *ngIf="hood$ | async as hood">
+  <app-heading-one [title]="hood.name"></app-heading-one>
+  <div class="public-margin container">
     <div class="markdown">
       <markdown [data]="hood.landingpage"></markdown>
     </div>
-
     <app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>
-</div>
+  </div>
+</ng-container>

kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.ts

@@ -10,7 +10,7 @@ import { first } from 'rxjs/operators';
 })
 export class HoodpageComponent implements OnInit {
   hoodId;
-  hood: BodyHood;
+  hood$;
 
   constructor(
     private route: ActivatedRoute,
@@ -21,12 +21,7 @@ export class HoodpageComponent implements OnInit {
   ngOnInit(): void {
     this.hoodId = this.route.snapshot.params.id;
     if (this.hoodId) {
-      this.hoodsService
-        .getHood(this.hoodId)
-        .pipe(first())
-        .subscribe((data) => {
-          this.hood = data;
-        });
+      this.hood$ = this.hoodsService.getHood(this.hoodId);
     }
   }
 }

kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html

@@ -13,19 +13,20 @@
   </mat-form-field>
   <mat-selection-list
     [multiple]="false"
-    *ngIf="hoods$ | async; let hoods; else: noHoods"
+    *ngIf="hoods$ | loading | async; let hoods"
     class="list"
   >
+    <ng-template [ngIf]="hoods.value">
       <a
         [routerLink]="['/organizers']"
-      *ngIf="(hoods | filter: searchText).length === 0"
+        *ngIf="(hoods.value | filter: searchText).length === 0"
       >
         <mat-list-option>
           <p>No matching hood found. Start by creating <u>a new hood!</u></p>
         </mat-list-option>
       </a>
       <a
-      *ngFor="let hood of hoods | filter: searchText"
+        *ngFor="let hood of hoods.value | filter: searchText"
         [routerLink]="['/hoods', hood.id]"
       >
         <mat-list-option>
@@ -33,9 +34,12 @@
           <mat-divider></mat-divider>
         </mat-list-option>
       </a>
-  </mat-selection-list>
-  <ng-template #noHoods>
-    No hoods available yet. Create
-    <a [routerLink]="['/dashboard']">a new hood! </a>
     </ng-template>
+    <ng-template [ngIf]="hoods.error"
+      ><mat-icon class="warning">warning</mat-icon></ng-template
+    >
+    <ng-template [ngIf]="hoods.loading">
+      <mat-spinner [diameter]="45" class="spinner"></mat-spinner>
+    </ng-template>
+  </mat-selection-list>
 </div>

kibicara-frontend/src/app/shared/loading-pipe/loading.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { LoadingPipe } from './loading.pipe';
+
+describe('LoadingPipe', () => {
+  it('create an instance', () => {
+    const pipe = new LoadingPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/shared/loading-pipe/loading.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { map, startWith, catchError } from 'rxjs/operators';
+import { of, isObservable } from 'rxjs';
+
+@Pipe({
+  name: 'loading',
+})
+export class LoadingPipe implements PipeTransform {
+  transform(val) {
+    return isObservable(val)
+      ? val.pipe(
+          map((value: any) => ({ loading: false, value })),
+          startWith({ loading: true }),
+          catchError((error) => of({ loading: false, error }))
+        )
+      : val;
+  }
+}

kibicara-frontend/src/app/shared/overlay/overlay.component.scss

@@ -2,10 +2,3 @@
   margin: 10%;
   text-align: center;
 }
-
-.spinner {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 40%;
-}

kibicara-frontend/src/app/shared/shared.module.ts

@@ -10,6 +10,7 @@ import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { HeadingOneComponent } from './heading-one/heading-one.component';
 import { FooterComponent } from './footer/footer.component';
+import { LoadingPipe } from './loading-pipe/loading.pipe';
 
 @NgModule({
   declarations: [
@@ -19,6 +20,7 @@ import { FooterComponent } from './footer/footer.component';
     OverlayComponent,
     HeadingOneComponent,
     FooterComponent,
+    LoadingPipe,
   ],
   imports: [
     MaterialModule,
@@ -33,6 +35,7 @@ import { FooterComponent } from './footer/footer.component';
     NotFoundComponent,
     HeadingOneComponent,
     FooterComponent,
+    LoadingPipe,
     MaterialModule,
     ReactiveFormsModule,
     FormsModule,

kibicara-frontend/src/sass/styles.scss

@@ -74,3 +74,16 @@ a {
 }
 
 /* public pages end */
+
+.spinner {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 40%;
+}
+
+.warning {
+  color: red;
+  text-align: center;
+  min-width: 100%;
+}