feat: add loading indicator to grid when download

Tormak9970 · Mar 31, 2023 · 65b9fe7 · 65b9fe7
1 parent 73594d1
commit 65b9fe7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/src/Stores.ts b/src/Stores.ts
@@ -36,6 +36,7 @@ export const appLibraryCache:Writable<{ [appid: string]: LibraryCacheEntry }> =
 export const gridsCache:{ [appid: number]: SGDBImage[] } = {};
 
 export const selectedGameAppId: Writable<number> = writable(null);
+export const dowloadingGridId: Writable<number> = writable(null);
 
 export const dbFilters:Writable<DBFilters> = writable({
   "Capsule": {

diff --git a/src/components/core/grids/Grid.svelte b/src/components/core/grids/Grid.svelte
@@ -4,19 +4,25 @@
   
   import type { SGDBImage } from "../../../lib/models/SGDB";
 
-  import { gridType } from "../../../Stores";
+  import { dowloadingGridId, gridType, selectedGameAppId } from "../../../Stores";
+    import LoadingSpinner from "../../info/LoadingSpinner.svelte";
 
   export let grid: SGDBImage;
   export let widths: any;
   export let heights: any;
 
+  let clicked = false;
+
   function selectGame() {
-    AppController.setSteamGridArt(grid.url);
+    AppController.setSteamGridArt(grid.id, grid.url);
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="grid" on:click={selectGame}>
+  <div class="loading-overlay" class:showing={$dowloadingGridId == grid.id}>
+    <LoadingSpinner width="40px" height="40px" />
+  </div>
   <div class="img" style="height: {heights[$gridType]}px;">
     <Lazy height="{heights[$gridType]}px" fadeOption={{delay: 500, duration: 1000}}>
       <img src="{grid.url.toString()}" alt="{grid.author}'s {$gridType} image" style="max-width: {widths[$gridType]}px; max-height: {heights[$gridType]}px; width: auto; height: auto;" />
@@ -72,4 +78,25 @@
     
     text-align: center;
   }
+
+  .loading-overlay {
+    display: none;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+
+    background-color: rgba(0, 0, 0, 0.7);
+
+    justify-content: center;
+    align-items: center;
+  }
+
+  .showing {
+    display: flex;
+  }
 </style>
diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
@@ -235,11 +235,12 @@ export class AppController {
 
   /**
    * Sets the image for a game to the provided image.
+   * @param appId The id of the grid.
    * @param url The url of the SteamGridDB image.
    * ? Logging complete.
    */
-  static async setSteamGridArt(url: URL): Promise<void> {
-    const localPath = await AppController.cacheController.getGridImage(url.toString());
+  static async setSteamGridArt(appId: number, url: URL): Promise<void> {
+    const localPath = await AppController.cacheController.getGridImage(appId, url.toString());
 
     const selectedGameId = get(selectedGameAppId);
     const selectedGridType = get(gridType);

diff --git a/src/lib/controllers/CacheController.ts b/src/lib/controllers/CacheController.ts
@@ -3,7 +3,7 @@ import { appCacheDir } from '@tauri-apps/api/path';
 
 import { get, type Unsubscriber } from "svelte/store";
 import { SGDB, type SGDBImage } from "../models/SGDB";
-import { gridsCache, gridType, GridTypes, steamGridDBKey } from "../../Stores";
+import { dowloadingGridId, gridsCache, gridType, GridTypes, steamGridDBKey } from "../../Stores";
 import { LogController } from "./LogController";
 
 /**
@@ -98,19 +98,23 @@ export class CacheController {
    * @param imageURL The url of the image to get.
    * ? Logging complete.
    */
-  async getGridImage(imageURL: string): Promise<string> {
+  async getGridImage(appId: number, imageURL: string): Promise<string> {
     LogController.log(`Fetching image ${imageURL}...`);
     const fileName = imageURL.substring(imageURL.lastIndexOf("/") + 1);
     const localImagePath = await path.join(this.gridCacheDirPath, get(gridType), fileName);
 
     if (!(await fs.exists(localImagePath))) {
       LogController.log(`Fetching image from API.`);
+
+      dowloadingGridId.set(appId);
       const imageData = await http.fetch<Uint8Array>(imageURL, {
         method: "GET",
         responseType: 3
       });
 
       await fs.writeBinaryFile(localImagePath, imageData.data);
+
+      dowloadingGridId.set(null);
     } else {
       LogController.log(`Cache found. Fetching image from local file system.`);
     }