feat(inventory): add loading spinner when loading inventory

After-the-End-of-All-Things · Aug 30, 2023 · a7ffb2d · a7ffb2d
1 parent 1e0d29e
commit a7ffb2d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 1 deletion.
diff --git a/client/src/app/pages/inventory/inventory.page.html b/client/src/app/pages/inventory/inventory.page.html
@@ -16,6 +16,7 @@
           <ion-card-header>
             <ion-card-title>
               Inventory ({{ items.length }} / 100)
+              <ion-spinner *ngIf="isLoadingItems$ | async"></ion-spinner>
             </ion-card-title>
           </ion-card-header>
 

diff --git a/client/src/app/pages/inventory/inventory.page.ts b/client/src/app/pages/inventory/inventory.page.ts
@@ -40,6 +40,7 @@ export class InventoryPage implements OnInit {
     Record<ItemSlot, IEquipment>
   >;
   @Select(InventoryStore.items) items$!: Observable<IItem[]>;
+  @Select(InventoryStore.isLoadingItems) isLoadingItems$!: Observable<boolean>;
 
   public readonly basicEquipTypes = AllArmor;
 

diff --git a/client/src/interfaces/inventory.ts b/client/src/interfaces/inventory.ts
@@ -4,4 +4,5 @@ export interface IInventoryStore {
   version: number;
   inventory: IInventory;
   items: IItem[];
+  isLoadingItems: boolean;
 }
diff --git a/client/src/stores/inventory/inventory.functions.ts b/client/src/stores/inventory/inventory.functions.ts
@@ -28,6 +28,7 @@ export const defaultStore: () => IInventoryStore = () => ({
     resources: {},
   },
   items: [],
+  isLoadingItems: false,
 });
 
 export function setInventory(
@@ -56,6 +57,7 @@ export function updateInventoryItems(
   if (!helpers) return;
   const { player, content } = helpers;
 
+  ctx.patchState({ isLoadingItems: true });
   player.getInventoryItems().subscribe((res: any) => {
     const items = res.items
       .filter((i: any) => !i.isInUse)
@@ -64,7 +66,7 @@ export function updateInventoryItems(
         instanceId: i.instanceId,
       })) as IItem[];
 
-    ctx.patchState({ items });
+    ctx.patchState({ items, isLoadingItems: false });
   });
 }
 

diff --git a/client/src/stores/inventory/inventory.store.ts b/client/src/stores/inventory/inventory.store.ts
@@ -42,4 +42,9 @@ export class InventoryStore {
   static items(state: IInventoryStore) {
     return state.items ?? [];
   }
+
+  @Selector()
+  static isLoadingItems(state: IInventoryStore) {
+    return state.isLoadingItems;
+  }
 }
diff --git a/client/src/styles/ionic-overrides.scss b/client/src/styles/ionic-overrides.scss
@@ -32,3 +32,7 @@ ion-button.icon-only {
   --padding-start: 4px;
   --padding-end: 4px;
 }
+
+ion-spinner {
+  height: 20px;
+}