In case of a lot of traces the UI hands for a bit #1980 - Improve per…

…formace of dialog when loading.
IsraelHikingMap · Apr 4, 2024 · 38d8607 · 38d8607
1 parent 149f4ce
commit 38d8607
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.html b/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.html
@@ -45,7 +45,7 @@
             </div>
         </div>
         <mat-spinner *ngIf="loadingShareUrls"></mat-spinner>
-        <p *ngIf="filteredShareUrls.length === 0 && !loadingShareUrls">{{resources.noShares}}</p>
+        <p *ngIf="hasNoShares()">{{resources.noShares}}</p>
     </div>
     <div mat-dialog-actions>
         <div class="flex flex-row w-full">

diff --git a/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.ts b/IsraelHiking.Web/src/application/components/dialogs/shares-dialog.component.ts
@@ -63,14 +63,17 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
         }));
         this.searchTerm.setValue(this.sessionSearchTerm);
         this.subscriptions.push(this.shareUrls$.subscribe(() => {
-            this.updateFilteredLists(this.searchTerm.value);
+            if (!this.loadingShareUrls) {
+                this.updateFilteredLists(this.searchTerm.value);
+            }
         }));
     }
 
     public async ngOnInit() {
-        this.loadingShareUrls = this.store.selectSnapshot((s: ApplicationState) => s.shareUrlsState).shareUrls.length === 0;
+        this.loadingShareUrls = true;
         this.shareUrlsService.syncShareUrls();
         this.loadingShareUrls = false;
+        this.updateFilteredLists(this.searchTerm.value);
     }
 
     public ngOnDestroy() {
@@ -208,6 +211,10 @@ export class SharesDialogComponent extends BaseMapComponent implements OnInit, O
         return this.shareUrlsService.getShareSocialLinks(this.getSelectedShareUrl());
     }
 
+    public hasNoShares(): boolean {
+        return !this.loadingShareUrls && this.filteredShareUrls.length === 0;
+    }
+
     public trackById(_: number, shareUrl: ShareUrl) {
         return shareUrl.id;
     }

diff --git a/IsraelHiking.Web/src/application/components/dialogs/traces-dialog.component.ts b/IsraelHiking.Web/src/application/components/dialogs/traces-dialog.component.ts
@@ -73,14 +73,17 @@ export class TracesDialogComponent extends BaseMapComponent implements OnInit, O
         });
         this.searchTerm.setValue(this.sessionSearchTerm);
         this.tracesChangedSubscription = this.traces$.subscribe(() => {
-            this.updateFilteredLists(this.searchTerm.value);
+            if (!this.loadingTraces) {
+                this.updateFilteredLists(this.searchTerm.value);
+            }
         });
     }
 
     public async ngOnInit() {
-        this.loadingTraces = this.store.selectSnapshot((s: ApplicationState) => s.tracesState).traces.length === 0;
+        this.loadingTraces = true;
         await this.tracesService.syncTraces();
         this.loadingTraces = false;
+        this.updateFilteredLists(this.searchTerm.value);
     }
 
     public ngOnDestroy() {