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">
+        <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,6 +35,8 @@
                 </a>
             </li>
         </ul>
+        <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
+        <ng-container *ngIf="loaded">
             <h2>
                 {{'folders' | i18n}}
                 <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
@@ -62,5 +64,6 @@
                     </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,7 +93,23 @@ export class VaultComponent implements OnInit {
             });
         });
 
+        while (this.syncService.syncInProgress) {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+        }
+
         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;
@@ -121,9 +138,9 @@ export class VaultComponent implements OnInit {
             await this.filterCollection(params.collectionId);
         } else {
             this.groupingsComponent.selectedAll = true;
+            await this.groupingsComponent.load();
             await this.ciphersComponent.load();
         }
-        });
     }
 
     viewCipher(cipher: CipherView) {

src/locales/en/messages.json

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