feat(picking): implement picking lists component loading indicator

libs/domain/picking/mocks/src/index.ts

@@ -3,6 +3,7 @@ export * from './mock-picking-header.service';
 export * from './mock-picking-list';
 export * from './mock-picking-list.providers';
 export * from './mock-picking-list.service';
+export * from './mock-sync-action-handler.service';
 export * from './mock-warehouse-user-assignments';
 export * from './mock-warehouse-user-assignments.providers';
 export * from './mock-warehouse-user-assignments.service';

libs/domain/picking/mocks/src/mock-picking-list.providers.ts

@@ -3,8 +3,10 @@ import {
   PickingHeaderService,
   PickingListService,
 } from '@spryker-oryx/picking';
+import { PickingSyncActionHandlerService } from '@spryker-oryx/picking/offline';
 import { MockPickingHeaderService } from './mock-picking-header.service';
 import { MockPickingListService } from './mock-picking-list.service';
+import { MockPickingSyncActionHandlerService } from './mock-sync-action-handler.service';
 
 export const mockPickingListProviders: Provider[] = [
   {
@@ -15,4 +17,8 @@ export const mockPickingListProviders: Provider[] = [
     provide: PickingHeaderService,
     useClass: MockPickingHeaderService,
   },
+  {
+    provide: PickingSyncActionHandlerService,
+    useClass: MockPickingSyncActionHandlerService,
+  },
 ];

libs/domain/picking/mocks/src/mock-sync-action-handler.service.ts

@@ -0,0 +1,10 @@
+import { PickingSyncActionHandlerService } from '@spryker-oryx/picking/offline';
+import { Observable, of } from 'rxjs';
+
+export class MockPickingSyncActionHandlerService
+  implements Partial<PickingSyncActionHandlerService>
+{
+  isSyncing(): Observable<boolean> {
+    return of(false);
+  }
+}

libs/domain/picking/offline/data-plugin.ts

@@ -4,11 +4,12 @@ import { Injector } from '@spryker-oryx/di';
 import { DexieIndexedDbService } from '@spryker-oryx/indexed-db';
 import { RouterService } from '@spryker-oryx/router';
 import {
+  BehaviorSubject,
+  Observable,
+  Subscription,
   combineLatest,
   map,
-  Observable,
   of,
-  Subscription,
   switchMap,
   tap,
   withLatestFrom,
@@ -18,6 +19,7 @@ import { PickingListOnlineAdapter } from './services';
 
 export class OfflineDataPlugin implements AppPlugin {
   protected subscription?: Subscription;
+  protected refreshing$ = new BehaviorSubject(false);
 
   getName(): string {
     return 'oryx.pickingOfflineData';
@@ -59,11 +61,24 @@ export class OfflineDataPlugin implements AppPlugin {
   }
 
   refreshData(injector: Injector): Observable<void> {
+    this.refreshing$.next(true);
     return this.clearDb(injector).pipe(
-      switchMap(() => this.populateDb(injector))
+      switchMap(() => this.populateDb(injector)),
+      tap({
+        next: () => {
+          this.refreshing$.next(false);
+        },
+        error: () => {
+          this.refreshing$.next(false);
+        },
+      })
     );
   }
 
+  isRefreshing(): Observable<boolean> {
+    return this.refreshing$;
+  }
+
   protected clearDb(injector: Injector): Observable<void> {
     const dexieIdbService = injector.inject(DexieIndexedDbService);
 

libs/domain/picking/offline/services/picking-sync-action-handler.service.spec.ts

@@ -171,6 +171,8 @@ describe('PickingSyncActionHandlerService', () => {
       },
     };
 
+    const syncCallback = vi.fn();
+
     beforeEach(() => {
       adapter.get.mockReturnValue(of(mockPickingLists));
       mockTable.bulkPut.mockReturnValue(mockPickingListsIdsToCreate);
@@ -180,6 +182,7 @@ describe('PickingSyncActionHandlerService', () => {
         }),
       });
       service.handleSync(mockSyncPush).subscribe(callback);
+      service.isSyncing().subscribe(syncCallback);
     });
 
     it('should call online adapter and update indexedDB', () => {
@@ -195,5 +198,10 @@ describe('PickingSyncActionHandlerService', () => {
         allKeys: true,
       });
     });
+
+    it('should update syncing status', () => {
+      expect(syncCallback).toHaveBeenNthCalledWith(1, true);
+      expect(syncCallback).toHaveBeenLastCalledWith(false);
+    });
   });
 });

libs/domain/picking/offline/services/picking-sync-action-handler.service.ts

@@ -2,8 +2,9 @@ import { inject } from '@spryker-oryx/di';
 import { IndexedDbService } from '@spryker-oryx/indexed-db';
 import { Sync, SyncActionHandler } from '@spryker-oryx/offline';
 import {
-  combineLatestWith,
+  BehaviorSubject,
   Observable,
+  combineLatestWith,
   switchMap,
   tap,
   throwError,
@@ -38,6 +39,8 @@ export class PickingSyncActionHandlerService
     protected onlineAdapter = inject(PickingListOnlineAdapter)
   ) {}
 
+  protected syncing$ = new BehaviorSubject(false);
+
   handleSync(sync: Sync<PickingSyncAction>): Observable<void> {
     switch (sync.action) {
       case PickingSyncAction.FinishPicking:
@@ -56,6 +59,10 @@ export class PickingSyncActionHandlerService
     }
   }
 
+  isSyncing(): Observable<boolean> {
+    return this.syncing$;
+  }
+
   protected handleFinishPicking(
     sync: Sync<PickingSyncAction.FinishPicking>
   ): Observable<void> {
@@ -86,6 +93,7 @@ export class PickingSyncActionHandlerService
       );
     }
 
+    this.syncing$.next(true);
     return this.onlineAdapter.get({ ids: sync.payload.ids }).pipe(
       combineLatestWith(this.indexedDbService.getStore(PickingListEntity)),
       switchMap(async ([pickingLists, store]) => {
@@ -97,6 +105,10 @@ export class PickingSyncActionHandlerService
         await store.bulkPut(pickingLists, {
           allKeys: true,
         });
+      }),
+      tap({
+        next: () => this.syncing$.next(false),
+        error: () => this.syncing$.next(false),
       })
     );
   }

libs/domain/picking/picking-lists/picking-lists.component.spec.ts

@@ -1,8 +1,10 @@
 import { fixture } from '@open-wc/testing-helpers';
+import { App, AppRef } from '@spryker-oryx/core';
 import { createInjector, destroyInjector } from '@spryker-oryx/di';
 import { PickingListService } from '@spryker-oryx/picking';
 import { CustomerNoteModalComponent } from '@spryker-oryx/picking/customer-note-modal';
 import { mockPickingListData } from '@spryker-oryx/picking/mocks';
+import { PickingSyncActionHandlerService } from '@spryker-oryx/picking/offline';
 import { CLOSE_EVENT, ModalComponent } from '@spryker-oryx/ui/modal';
 import { i18n, useComponent } from '@spryker-oryx/utilities';
 import { html } from 'lit';
@@ -11,13 +13,29 @@ import { afterEach, beforeAll, beforeEach } from 'vitest';
 import { PickingListsComponent } from './picking-lists.component';
 import { pickingListsComponent } from './picking-lists.def';
 
+const mockOfflineDataPlugin = {
+  isRefreshing: vi.fn().mockReturnValue(of(false)),
+};
+
+class MockPickingSyncActionHandlerService
+  implements Partial<PickingSyncActionHandlerService>
+{
+  isSyncing = vi.fn().mockReturnValue(of(false));
+}
+
+class MockApp implements Partial<App> {
+  requirePlugin = vi.fn().mockReturnValue(mockOfflineDataPlugin);
+}
+
 class MockPickingListService implements Partial<PickingListService> {
   get = vi.fn().mockReturnValue(of(mockPickingListData));
+  isRefreshing = vi.fn().mockReturnValue(of(false));
 }
 
 describe('PickingListsComponent', () => {
   let element: PickingListsComponent;
   let service: MockPickingListService;
+  let syncService: MockPickingSyncActionHandlerService;
 
   beforeAll(async () => {
     await useComponent([pickingListsComponent]);
@@ -30,12 +48,23 @@ describe('PickingListsComponent', () => {
           provide: PickingListService,
           useClass: MockPickingListService,
         },
+        {
+          provide: PickingSyncActionHandlerService,
+          useClass: MockPickingSyncActionHandlerService,
+        },
+        {
+          provide: AppRef,
+          useClass: MockApp,
+        },
       ],
     });
 
     service = testInjector.inject(
       PickingListService
     ) as unknown as MockPickingListService;
+    syncService = testInjector.inject(
+      PickingSyncActionHandlerService
+    ) as unknown as MockPickingSyncActionHandlerService;
     element = await fixture(html`<oryx-picking-lists></oryx-picking-lists>`);
   });
 
@@ -44,6 +73,42 @@ describe('PickingListsComponent', () => {
     destroyInjector();
   });
 
+  describe('when not retrieving data', () => {
+    it('should not show loading indicator', () => {
+      expect(element.renderRoot.querySelector('.loading')).toBeNull();
+    });
+
+    it('should not show sync indicator', () => {
+      expect(element.renderRoot.querySelector('.sync')).toBeNull();
+    });
+  });
+
+  describe('when retrieving data', () => {
+    beforeEach(async () => {
+      mockOfflineDataPlugin.isRefreshing.mockReturnValue(of(true));
+      element = await fixture(html`<oryx-picking-lists></oryx-picking-lists>`);
+    });
+
+    it('should show loading indicator', () => {
+      expect(element.renderRoot.querySelector('.loading')).not.toBeNull();
+    });
+
+    afterEach(() => {
+      mockOfflineDataPlugin.isRefreshing.mockReturnValue(of(false));
+    });
+  });
+
+  describe('when receiving push notifications', () => {
+    beforeEach(async () => {
+      syncService.isSyncing.mockReturnValue(of(true));
+      element = await fixture(html`<oryx-picking-lists></oryx-picking-lists>`);
+    });
+
+    it('should show loading indicator', () => {
+      expect(element.renderRoot.querySelector('.sync')).not.toBeNull();
+    });
+  });
+
   describe('when picking lists is not empty', () => {
     const getCustomerNoteModal = (): CustomerNoteModalComponent | null =>
       element.renderRoot.querySelector('oryx-customer-note-modal');