fix: error messages no longer show briefly when changing games

Tormak9970 · Mar 25, 2024 · 9a910b7 · 9a910b7
1 parent 77c5476
commit 9a910b7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 42 deletions.
diff --git a/src/components/core/grids/GridResults.svelte b/src/components/core/grids/GridResults.svelte
@@ -12,7 +12,7 @@
   
   const padding = 20;
 
-  export let isLoading: boolean;
+  let isLoading = true;
   export let hasCustomName: boolean;
 
   let hasMorePages = getHasMorePages($selectedSteamGridGameId, $gridType);
@@ -48,22 +48,23 @@
 
   onMount(() => {
     console.log("mounting grid results...");
-    filterGridsOnStateChange(getPageNumberForGame($selectedSteamGridGameId, $gridType), hasCustomName);
+    filterGridsOnStateChange(getPageNumberForGame($selectedSteamGridGameId, $gridType), hasCustomName).then(() => {
+      isLoading = false;
+    });
   });
 </script>
 
-<!-- TODO: prevent error messages from showing during loading -->
-{#if $isOnline}
-  {#if !$needsSGDBAPIKey}
-    {#if !!$selectedGameAppId}
-      <PaddedScrollContainer height={"calc(100% - 7px)"} width={"100%"} background={"transparent"} loading={isLoading} marginTop="0px">
-        {#if isLoading}
-          <div class="game-grid" style="--img-width: {SMALL_GRID_DIMENSIONS.widths[$gridType] + padding}px; --img-height: {SMALL_GRID_DIMENSIONS.heights[$gridType] + padding + 18}px;">
-            {#each new Array(100) as _}
-              <GridLoadingSkeleton />
-            {/each}
-          </div>
-        {:else}
+<PaddedScrollContainer height={"calc(100% - 7px)"} width={"100%"} background={"transparent"} loading={isLoading} marginTop="0px">
+  {#if isLoading}
+    <div class="game-grid" style="--img-width: {SMALL_GRID_DIMENSIONS.widths[$gridType] + padding}px; --img-height: {SMALL_GRID_DIMENSIONS.heights[$gridType] + padding + 18}px;">
+      {#each new Array(100) as _}
+        <GridLoadingSkeleton />
+      {/each}
+    </div>
+  {:else}
+    {#if $isOnline}
+      {#if !$needsSGDBAPIKey}
+        {#if !!$selectedGameAppId}
           {#if grids.length > 0}
             <div class="game-grid" style="--img-width: {SMALL_GRID_DIMENSIONS.widths[$gridType] + padding}px; --img-height: {SMALL_GRID_DIMENSIONS.heights[$gridType] + padding + 18}px;">
               {#each grids as grid (`${$selectedSteamGridGameId}|${grid.id}|${$gridType}`)}
@@ -75,28 +76,28 @@
               No results for {$gridType === GridTypes.HERO ? "Heroe" : $gridType}s for "{$selectedGameName}".
             </div>
           {/if}
+        {:else}
+          <div class="message">
+            Select a game to start managing your art!
+          </div>
         {/if}
-        <InfiniteScroll
-          hasMore={hasMorePages}
-          threshold={100}
-          on:loadMore={handleLoadOnScroll}
-        />
-      </PaddedScrollContainer>
+      {:else}
+        <div class="message">
+          Please set your API key to use SteamGridDB.
+        </div>
+      {/if}
     {:else}
       <div class="message">
-        Select a game to start managing your art!
+        You're currently offline. In order to go online and access SteamGridDB, try hitting the "Go Online" button below.
       </div>
     {/if}
-  {:else}
-    <div class="message">
-      Please set your API key to use SteamGridDB.
-    </div>
   {/if}
-{:else}
-  <div class="message">
-    You're currently offline. In order to go online and access SteamGridDB, try hitting the "Go Online" button below.
-  </div>
-{/if}
+  <InfiniteScroll
+    hasMore={hasMorePages}
+    threshold={100}
+    on:loadMore={handleLoadOnScroll}
+  />
+</PaddedScrollContainer>
 
 <style>
   .game-grid {

diff --git a/src/components/core/grids/Grids.svelte b/src/components/core/grids/Grids.svelte
@@ -107,17 +107,11 @@
 
   onMount(() => {
     steamGridSearchCacheUnsub = steamGridSearchCache.subscribe((searchCache) => {
-      isLoading = true;
       setAvailableSgdbGamesOnStateChange(searchCache, $selectedGameAppId);
-      isLoading = false;
     });
 
     manualGamesUnsub = manualSteamGames.subscribe((games) => {
-      if ($selectedGameAppId && !games.find((game) => game.appid === $selectedGameAppId)) {
-        isLoading = true;
-        resetGridStores();
-        isLoading = false;
-      }
+      if ($selectedGameAppId && !games.find((game) => game.appid === $selectedGameAppId)) resetGridStores();
     });
 
     customGameNamesUnsub = customGameNames.subscribe(async (customNames) => {
@@ -137,14 +131,10 @@
     });
 
     selectedPlatformUnsub = currentPlatform.subscribe((platform) => {
-      isLoading = true;
       resetGridStores();
-      isLoading = false;
     });
     apiKeyUnsub = steamGridDBKey.subscribe(async (key) => {
-      isLoading = true;
       if (key === "" || !AppController.sgdbClientInitialized()) resetGridStores();
-      isLoading = false;
     });
   });
 
@@ -211,7 +201,7 @@
 
     <div class="content" style="height: calc(100% - 85px); position: relative; z-index: 1;">
       {#key `${$isOnline}|${$gridType}|${$selectedGameAppId}|${$selectedSteamGridGameId}|${JSON.stringify($dbFilters[$gridType])}|${$selectedGameName}`}
-        <GridResults isLoading={isLoading} hasCustomName={hasCustomName} />
+        <GridResults hasCustomName={hasCustomName} />
       {/key}
     </div>
   </div>