delay load while syncing

src/app/vault/ciphers.component.html

@@ -21,10 +21,13 @@
                 <span class="detail">{{c.subTitle}}</span>
             </a>
         </div>
-        <div *ngIf="loaded && searchedCiphers.length === 0" class="no-items">
-            <i class="fa fa-frown-o fa-4x"></i>
-            <p>{{'noItemsInList' | i18n}}</p>
-            <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
+        <div class="no-items" *ngIf="searchedCiphers.length === 0">
+            <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+            <ng-container *ngIf="loaded">
+                <i class="fa fa-frown-o fa-4x"></i>
+                <p>{{'noItemsInList' | i18n}}</p>
+                <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
+            </ng-container>
         </div>
     </ng-container>
 </div>

src/app/vault/groupings.component.html

@@ -35,32 +35,35 @@
                 </a>
             </li>
         </ul>
-        <h2>
-            {{'folders' | i18n}}
-            <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
-                <i class="fa fa-plus fa-fw"></i>
-            </button>
-        </h2>
-        <ul class="fa-ul">
-            <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
-                <a href="#" appStopClick appBlurClick (click)="folder(f)">
-                    <i class="fa-li fa fa-caret-right"></i> {{f.name}}
-                    <span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
-                          *ngIf="f.id">
-                        <i class="fa fa-pencil fa-fw"></i>
-                    </span>
-                </a>
-            </li>
-        </ul>
-        <div *ngIf="collections && collections.length">
-            <h2>{{'collections' | i18n}}</h2>
+        <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
+        <ng-container *ngIf="loaded">
+            <h2>
+                {{'folders' | i18n}}
+                <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
+                    <i class="fa fa-plus fa-fw"></i>
+                </button>
+            </h2>
             <ul class="fa-ul">
-                <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
-                    <a href="#" appStopClick appBlurClick (click)="collection(c)">
-                        <i class="fa-li fa fa-caret-right"></i> {{c.name}}
+                <li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
+                    <a href="#" appStopClick appBlurClick (click)="folder(f)">
+                        <i class="fa-li fa fa-caret-right"></i> {{f.name}}
+                        <span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}"
+                              *ngIf="f.id">
+                            <i class="fa fa-pencil fa-fw"></i>
+                        </span>
                     </a>
                 </li>
             </ul>
-        </div>
+            <div *ngIf="collections && collections.length">
+                <h2>{{'collections' | i18n}}</h2>
+                <ul class="fa-ul">
+                    <li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
+                        <a href="#" appStopClick appBlurClick (click)="collection(c)">
+                            <i class="fa-li fa fa-caret-right"></i> {{c.name}}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </ng-container>
     </div>
 </div>

src/app/vault/groupings.component.ts

@@ -4,7 +4,6 @@ import {
     Component,
     EventEmitter,
     Input,
-    OnInit,
     Output,
 } from '@angular/core';
 
@@ -20,7 +19,7 @@ import { FolderService } from 'jslib/abstractions/folder.service';
     selector: 'app-vault-groupings',
     template: template,
 })
-export class GroupingsComponent implements OnInit {
+export class GroupingsComponent {
     @Output() onAllClicked = new EventEmitter();
     @Output() onFavoritesClicked = new EventEmitter();
     @Output() onCipherTypeClicked = new EventEmitter<CipherType>();
@@ -31,6 +30,7 @@ export class GroupingsComponent implements OnInit {
 
     folders: any[];
     collections: any[];
+    loaded: boolean = false;
     cipherType = CipherType;
     selectedAll: boolean = false;
     selectedFavorites: boolean = false;
@@ -39,12 +39,15 @@ export class GroupingsComponent implements OnInit {
     selectedFolderId: string = null;
     selectedCollectionId: string = null;
 
-    constructor(private collectionService: CollectionService, private folderService: FolderService) {
-        // ctor
+    constructor(private collectionService: CollectionService, private folderService: FolderService) { }
+
+    async load() {
+        await this.loadFolders();
+        await this.loadCollections();
+        this.loaded = true;
     }
 
-    async ngOnInit() {
-        await this.loadFolders();
+    async loadCollections() {
         this.collections = await this.collectionService.getAllDecrypted();
     }
 

src/app/vault/vault.component.ts

@@ -33,6 +33,7 @@ import { CollectionView } from 'jslib/models/view/collectionView';
 import { FolderView } from 'jslib/models/view/folderView';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
 
 @Component({
     selector: 'app-vault',
@@ -57,7 +58,7 @@ export class VaultComponent implements OnInit {
     constructor(private route: ActivatedRoute, private router: Router, private location: Location,
         private componentFactoryResolver: ComponentFactoryResolver, private i18nService: I18nService,
         private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
-        private ngZone: NgZone) {
+        private ngZone: NgZone, private syncService: SyncService) {
     }
 
     async ngOnInit() {
@@ -92,40 +93,56 @@ export class VaultComponent implements OnInit {
             });
         });
 
-        this.route.queryParams.subscribe(async (params) => {
-            if (params.cipherId) {
-                const cipherView = new CipherView();
-                cipherView.id = params.cipherId;
-                if (params.action === 'edit') {
-                    this.editCipher(cipherView);
-                } else {
-                    this.viewCipher(cipherView);
-                }
-            } else if (params.action === 'add') {
-                this.addCipher();
-            }
+        while (this.syncService.syncInProgress) {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+        }
 
-            if (params.favorites) {
-                this.groupingsComponent.selectedFavorites = true;
-                await this.filterFavorites();
-            } else if (params.type) {
-                const t = parseInt(params.type, null);
-                this.groupingsComponent.selectedType = t;
-                await this.filterCipherType(t);
-            } else if (params.folderId) {
-                this.groupingsComponent.selectedFolder = true;
-                this.groupingsComponent.selectedFolderId = params.folderId;
-                await this.filterFolder(params.folderId);
-            } else if (params.collectionId) {
-                this.groupingsComponent.selectedCollectionId = params.collectionId;
-                await this.filterCollection(params.collectionId);
-            } else {
-                this.groupingsComponent.selectedAll = true;
-                await this.ciphersComponent.load();
-            }
+        this.route.queryParams.subscribe(async (params) => {
+            await this.load(params);
         });
     }
 
+    async load(params?: { [key: string]: any }) {
+        if (params == null) {
+            this.groupingsComponent.selectedAll = true;
+            await this.groupingsComponent.load();
+            await this.ciphersComponent.load();
+            return;
+        }
+
+        if (params.cipherId) {
+            const cipherView = new CipherView();
+            cipherView.id = params.cipherId;
+            if (params.action === 'edit') {
+                this.editCipher(cipherView);
+            } else {
+                this.viewCipher(cipherView);
+            }
+        } else if (params.action === 'add') {
+            this.addCipher();
+        }
+
+        if (params.favorites) {
+            this.groupingsComponent.selectedFavorites = true;
+            await this.filterFavorites();
+        } else if (params.type) {
+            const t = parseInt(params.type, null);
+            this.groupingsComponent.selectedType = t;
+            await this.filterCipherType(t);
+        } else if (params.folderId) {
+            this.groupingsComponent.selectedFolder = true;
+            this.groupingsComponent.selectedFolderId = params.folderId;
+            await this.filterFolder(params.folderId);
+        } else if (params.collectionId) {
+            this.groupingsComponent.selectedCollectionId = params.collectionId;
+            await this.filterCollection(params.collectionId);
+        } else {
+            this.groupingsComponent.selectedAll = true;
+            await this.groupingsComponent.load();
+            await this.ciphersComponent.load();
+        }
+    }
+
     viewCipher(cipher: CipherView) {
         if (this.action === 'view' && this.cipherId === cipher.id) {
             return;

src/locales/en/messages.json

@@ -621,5 +621,8 @@
   },
   "account": {
     "message": "Account"
+  },
+  "loading": {
+    "message": "Loading..."
   }
 }