Fix: Loading filters on safelisted instances page (#167)

Fediseer · Nov 8, 2023 · 77cb895 · 77cb895
1 parent eda337c
commit 77cb895
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/src/app/instances/pages/safelisted-instances/safelisted-instances.component.html b/src/app/instances/pages/safelisted-instances/safelisted-instances.component.html
@@ -3,40 +3,48 @@
 <ng-template #content>
   <div class="col-md-12">
     <div class="card">
-      <div class="card-body">
-        <!-- filters -->
-        <form [formGroup]="form" (submit)="submitFilterForm()">
-          <div class="row">
-            <div class="col-md-4">
-              <div class="form-group">
-                <label for="inputFilterTags">Tags</label>
-                <select formControlName="tags" id="inputFilterTags" multiple tom-select [maxItems]="null" [create]="true">
-                  <option *ngFor="let option of availableTags" [value]="option">{{option}}</option>
-                </select>
+      <div class="card-header">
+        <h3 class="card-title">{{"app.filter.title" | transloco}}</h3>
+      </div>
+      <div class="card-body position-relative">
+        <app-loader *ngIf="loadingFilters else filters"></app-loader>
+        <ng-template #filters>
+          <form [formGroup]="form" (submit)="submitFilterForm()">
+            <div class="row">
+              <div class="col-md-4">
+                <div class="form-group">
+                  <label for="inputFilterTags">Tags</label>
+                  <select *ngIf="availableTags.length" formControlName="tags" id="inputFilterTags" multiple tom-select [maxItems]="null" [create]="true">
+                    <option *ngFor="let option of availableTags" [value]="option">{{option}}</option>
+                  </select>
+                </div>
               </div>
-            </div>
-            <div class="col-md-4">
-              <div class="form-group">
-                <label for="inputFilterMinimumEndorsements">Minimum amount of endorsements</label>
-                <input type="number" id="inputFilterMinimumEndorsements" formControlName="minimumEndorsements" class="form-control" />
+              <div class="col-md-4">
+                <div class="form-group">
+                  <label for="inputFilterMinimumEndorsements">Minimum amount of endorsements</label>
+                  <input type="number" id="inputFilterMinimumEndorsements" formControlName="minimumEndorsements" class="form-control" />
+                </div>
               </div>
-            </div>
-            <div class="col-md-4">
-              <div class="form-group">
-                <label for="inputFilterMinimumGuarantors">Minimum amount of guarantors</label>
-                <input type="number" id="inputFilterMinimumGuarantors" formControlName="minimumGuarantors" class="form-control" />
+              <div class="col-md-4">
+                <div class="form-group">
+                  <label for="inputFilterMinimumGuarantors">Minimum amount of guarantors</label>
+                  <input type="number" id="inputFilterMinimumGuarantors" formControlName="minimumGuarantors" class="form-control" />
+                </div>
               </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col-md-3">
-              <div class="form-group">
-                <button [disabled]="!form.valid" type="submit" class="btn btn-primary">Filter</button>
+            <div class="row">
+              <div class="col-md-3">
+                <div class="form-group">
+                  <button [disabled]="!form.valid" type="submit" class="btn btn-primary">Filter</button>
+                </div>
               </div>
             </div>
-          </div>
-        </form>
-        <!-- end filters -->
+          </form>
+        </ng-template>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-body">
         <p *ngIf="!currentInstance.anonymous">
           You might also be looking to manage <a routerLink="/endorsements/my">your endorsements</a>.
         </p>

diff --git a/src/app/instances/pages/safelisted-instances/safelisted-instances.component.ts b/src/app/instances/pages/safelisted-instances/safelisted-instances.component.ts
@@ -32,6 +32,7 @@ export class SafelistedInstancesComponent implements OnInit {
   public lastPageReached = false;
   public pages: number[] = [];
   public loading: boolean = true;
+  public loadingFilters: boolean = true;
 
   public availableTags: string[] = [];
 
@@ -110,6 +111,7 @@ export class SafelistedInstancesComponent implements OnInit {
       this.loading = false;
 
       this.availableTags = await toPromise(this.cachedApi.getAvailableTags());
+      this.loadingFilters = false;
 
       if (!this.initialLoadComplete) {
         this.initialLoadComplete = true;