feat: added grids loader and no results msg

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 selectedGameName: Writable<string> = writable(null);
 export const dowloadingGridId: Writable<number> = writable(null);
 
 export const dbFilters:Writable<DBFilters> = writable({

src/components/Titlebar.svelte

@@ -18,7 +18,6 @@
       isMaxed = !isMaxed;
     });
     close.addEventListener("click", async () => {
-      console.log(title);
       await exit(0);
     });
   });

src/components/core/filters/Filters.svelte

@@ -19,7 +19,6 @@
       filters[$gridType][section][filter] = value;
 
       $dbFilters = {...filters};
-      console.log($dbFilters);
     }
   }
 

src/components/core/games/Game.svelte

@@ -5,7 +5,7 @@
   import Lazy from "svelte-lazy";
 
   import { SettingsManager } from "../../../lib/utils/SettingsManager";
-  import { appLibraryCache, gridType, GridTypes, hiddenGameIds, selectedGameAppId } from "../../../Stores";
+  import { appLibraryCache, gridType, GridTypes, hiddenGameIds, selectedGameAppId, selectedGameName } from "../../../Stores";
 
   export let game: SteamGame;
   export let widths: any;
@@ -18,15 +18,21 @@
   let imagePath = "";
   $: isHidden = $hiddenGameIds.includes(game.appid);
 
-  function selectGame() { $selectedGameAppId = game.appid; }
+  function selectGame() {
+    $selectedGameAppId = game.appid;
+    $selectedGameName = game.name;
+  }
 
   function hide() {
     const tmp = $hiddenGameIds;
     tmp.push(game.appid);
     $hiddenGameIds = [...tmp];
     SettingsManager.updateSetting("hiddenGameIds", $hiddenGameIds);
 
-    if ($selectedGameAppId == game.appid) $selectedGameAppId = null;
+    if ($selectedGameAppId == game.appid) {
+      $selectedGameAppId = null;
+      $selectedGameName = null;
+    }
   }
 
   function unHide() {

src/components/core/grids/Grids.svelte

@@ -4,8 +4,10 @@
   import { Pane } from "svelte-splitpanes";
   import type { Unsubscriber } from "svelte/store";
   import { AppController } from "../../../lib/controllers/AppController";
+    import { LogController } from "../../../lib/controllers/LogController";
   import type { SGDBImage } from "../../../lib/models/SGDB";
-  import { dbFilters, gridType, GridTypes, isOnline, needsAPIKey, selectedGameAppId, steamGridDBKey, type DBFilters } from "../../../Stores";
+  import { dbFilters, gridType, GridTypes, isOnline, needsAPIKey, selectedGameAppId, selectedGameName, steamGridDBKey, type DBFilters } from "../../../Stores";
+    import LoadingSpinner from "../../info/LoadingSpinner.svelte";
   import Button from "../../interactables/Button.svelte";
   import ListTabs from "../../layout/tabs/ListTabs.svelte";
   import HorizontalSpacer from "../../spacers/HorizontalSpacer.svelte";
@@ -46,15 +48,25 @@
     const epilepsyAllowed = targetFilters.oneoftag.epilepsy;
     const nsfwAllowed = targetFilters.oneoftag.nsfw;
 
-    return allGrids.filter((grid: SGDBImage) => {
+    const resGrids = allGrids.filter((grid: SGDBImage) => {
       return gridStyles.includes(grid.style)
         && dimensions.includes(`${grid.width}x${grid.height}`)
         && imageFormats.includes(grid.mime)
         && (grid.epilepsy ? epilepsyAllowed : true)
         && (grid.nsfw ? nsfwAllowed : true);
     });
+
+    let query = `"${$gridType == GridTypes.HERO ? "Heroe" : $gridType}s for ${$selectedGameName}"`;
+    if (resGrids.length > 0) {
+      LogController.log(`Query: ${query}. Result: ${resGrids.length} grids.`);
+    } else {
+      LogController.log(`Query: ${query}. Result: no grids.`);
+    }
+
+    return resGrids;
   }
 
+  let isLoading = false;
   let grids: SGDBImage[] = [];
 
   /**
@@ -88,20 +100,29 @@
 
   onMount(() => {
     selectedAppIdUnsub = selectedGameAppId.subscribe(async (id) => {
+      isLoading = true;
       if ($isOnline && $steamGridDBKey != "" && id != null) grids = filterGrids(await AppController.getSteamGridArt(id), $gridType, $dbFilters);
+      isLoading = false;
     });
     onlineUnsub = isOnline.subscribe(async (online) => {
+      isLoading = true;
       if (online && $steamGridDBKey != "" && $selectedGameAppId != null) grids = filterGrids(await AppController.getSteamGridArt($selectedGameAppId), $gridType, $dbFilters);
+      isLoading = false;
     });
     gridTypeUnsub = gridType.subscribe(async (type) => {
-      console.log(type);
+      isLoading = true;
       if ($isOnline && $steamGridDBKey != "" && $selectedGameAppId != null) grids = filterGrids(await AppController.getSteamGridArt($selectedGameAppId), type, $dbFilters);
+      isLoading = false;
     });
     apiKeyUnsub = steamGridDBKey.subscribe(async (key) => {
+      isLoading = true;
       if ($isOnline && key != "" && $selectedGameAppId != null) grids = filterGrids(await AppController.getSteamGridArt($selectedGameAppId), $gridType, $dbFilters);
+      isLoading = false;
     });
     dbFiltersUnsub = dbFilters.subscribe(async (filters) => {
+      isLoading = true;
       if ($isOnline && $steamGridDBKey != "" && $selectedGameAppId != null) grids = filterGrids(await AppController.getSteamGridArt($selectedGameAppId), $gridType, filters);
+      isLoading = false;
     });
   });
 
@@ -136,11 +157,23 @@
               <VerticalSpacer />
               <VerticalSpacer />
 
-              <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
-                {#each grids as grid (`${grid.id}|${$gridType}`)}
-                  <Grid grid={grid} widths={widths} heights={heights} />
-                {/each}
-              </div>
+              {#if isLoading}
+                <div class="loader-container">
+                  <LoadingSpinner />
+                </div>
+              {:else}
+                {#if grids.length > 0}
+                  <div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
+                    {#each grids as grid (`${grid.id}|${$gridType}`)}
+                      <Grid grid={grid} widths={widths} heights={heights} />
+                    {/each}
+                  </div>
+                {:else}
+                  <div class="message">
+                    No results for {$gridType == GridTypes.HERO ? "Heroe" : $gridType}s for "{$selectedGameName}".
+                  </div>
+                {/if}
+              {/if}
 
               <VerticalSpacer />
               <VerticalSpacer />
@@ -202,4 +235,13 @@
     opacity: 0.1;
     padding-top: 40px;
   }
+
+  .loader-container {
+    width: 100%;
+    padding-top: 14px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

src/lib/controllers/AppController.ts

@@ -3,7 +3,7 @@ import { ToastController } from "./ToastController";
 import { SettingsManager } from "../utils/SettingsManager";
 import { LogController } from "./LogController";
 import { get } from "svelte/store";
-import { GridTypes, appLibraryCache, canSave, gridType, hiddenGameIds, isOnline, needsAPIKey, originalAppLibraryCache, selectedGameAppId, steamGames, steamGridDBKey } from "../../Stores";
+import { GridTypes, appLibraryCache, canSave, gridType, hiddenGameIds, isOnline, needsAPIKey, originalAppLibraryCache, selectedGameAppId, selectedGameName, steamGames, steamGridDBKey } from "../../Stores";
 import { CacheController } from "./CacheController";
 import { RustInterop } from "./RustInterop";
 import { toast } from "@zerodevx/svelte-toast";
@@ -223,14 +223,15 @@ export class AppController {
    */
   static async setCustomArt(path: string): Promise<void> {
     const selectedGameId = get(selectedGameAppId);
+    const gameName = get(selectedGameName);
     const selectedGridType = get(gridType);
     const gameImages = get(appLibraryCache);
     gameImages[selectedGameId][selectedGridType] = path;
 
     appLibraryCache.set(gameImages);
     canSave.set(true);
 
-    LogController.log(`Set ${selectedGridType} for ${selectedGameId} to ${path}.`);
+    LogController.log(`Set ${selectedGridType} for ${gameName} (${selectedGameId}) to ${path}.`);
   }
 
   /**
@@ -243,14 +244,15 @@ export class AppController {
     const localPath = await AppController.cacheController.getGridImage(appId, url.toString());
 
     const selectedGameId = get(selectedGameAppId);
+    const gameName = get(selectedGameName);
     const selectedGridType = get(gridType);
     const gameImages = get(appLibraryCache);
     gameImages[selectedGameId][selectedGridType] = localPath;
 
     appLibraryCache.set(gameImages);
     canSave.set(true);
 
-    LogController.log(`Set ${selectedGridType} for ${selectedGameId} to ${localPath}.`);
+    LogController.log(`Set ${selectedGridType} for ${gameName} (${selectedGameId}) to ${localPath}.`);
   }
 
   /**

src/lib/controllers/CacheController.ts

@@ -132,8 +132,6 @@ export class CacheController {
     LogController.log(`Fetching grids for game ${appId}...`);
     const type = get(gridType);
     const gridCacheKeys = Object.keys(gridsCache);
-
-    console.log(`get${type.includes("Capsule") ? "Grid": (type == GridTypes.HERO ? "Heroe" : type)}sBySteamAppId`);
 
     if (gridCacheKeys.includes(appId.toString())) {
       const types = Object.keys(gridsCache[appId.toString()]);

src/lib/models/SGDB.ts

@@ -144,7 +144,6 @@ export class SGDB {
     }
 
     let response = await http.fetch<any>(`${this.baseURL}${url}`, options);
-    console.log(`${this.baseURL}${url}`);
 
     if (response.ok) {
       if (response?.data.success) {