fix: additional grids now load if the window is resized

Tormak9970 · Apr 19, 2024 · 83d6708 · 83d6708
1 parent 9f11b08
commit 83d6708
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/components/core/grids/GridResults.svelte b/src/components/core/grids/GridResults.svelte
@@ -3,7 +3,7 @@
   import type { SGDBImage } from "../../../lib/models/SGDB";
   import { dbFilters, gridType, GridTypes, isOnline, needsSGDBAPIKey, selectedGameAppId, selectedGameName, steamGridDBKey, selectedSteamGridGameId, lastPageCache, hasMorePagesCache, loadingSettings } from "../../../stores/AppState";
   import Grid from "./Grid.svelte";
-  import { filterGrids, getHasMorePages, getPageNumberForGame } from "../../../lib/utils/Utils";
+  import { debounce, filterGrids, getHasMorePages, getPageNumberForGame } from "../../../lib/utils/Utils";
   import GridLoadingSkeleton from "../../layout/GridLoadingSkeleton.svelte";
   import PaddedScrollContainer from "../../layout/PaddedScrollContainer.svelte";
   import { SMALL_GRID_DIMENSIONS } from "../../../lib/utils/ImageConstants";
@@ -14,6 +14,8 @@
 
   export let hasCustomName: boolean;
 
+  let gridsContainer: HTMLDivElement;
+
   let isLoading = true;
   let hasMorePages = getHasMorePages($selectedSteamGridGameId, $gridType);
   let grids: SGDBImage[] = [];
@@ -46,14 +48,21 @@
     }
   }
 
+  async function handleResize(isOverflowing: boolean) {
+    if (gridsContainer && !isOverflowing) {
+      handleLoadOnScroll();
+    }
+  }
+  const debouncedResize = debounce(handleResize, 500);
+
   onMount(() => {
     filterGridsOnStateChange(getPageNumberForGame($selectedSteamGridGameId, $gridType), hasCustomName).then(() => {
       isLoading = false;
     });
   });
 </script>
 
-<PaddedScrollContainer height={"calc(100% - 7px)"} width={"100%"} background={"transparent"} loading={isLoading} marginTop="0px">
+<PaddedScrollContainer height={"calc(100% - 7px)"} width={"100%"} background={"transparent"} loading={isLoading} marginTop="0px" onOverflowChange={debouncedResize}>
   {#if !$loadingSettings}
     {#if $isOnline}
       {#if !$needsSGDBAPIKey}
@@ -66,7 +75,7 @@
             </div>
           {:else}
             {#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;">
+              <div bind:this={gridsContainer} 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}`)}
                   <Grid grid={grid} />
                 {/each}

diff --git a/src/components/layout/PaddedScrollContainer.svelte b/src/components/layout/PaddedScrollContainer.svelte
@@ -10,6 +10,8 @@
   export let loading = false;
 
   let isOverflowing = !loading;
+  export let onOverflowChange: (isOverflowing: boolean) => void = () => {};
+
   let contentHeight: number;
   $: contentHeight && debouncedCheck();
   
@@ -34,7 +36,12 @@
     return isOverflowing;
   }
 
-  const setIsOverflowing = () => { if (scrollContainer) isOverflowing = checkOverflow(scrollContainer); };
+  const setIsOverflowing = () => {
+    if (scrollContainer) {
+      isOverflowing = checkOverflow(scrollContainer);
+      onOverflowChange(isOverflowing);
+    }
+  }
   const debouncedCheck: () => void = debounce(setIsOverflowing, 100);
 </script>