granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix infinite scroll crash in collection views

Browse source 
keep sentinel always in DOM with css hiding instead of {#if}
This commit is contained in:
Justin Edmund 2025-12-20 13:50:27 -08:00
parent 02939927ce
commit 574454936c
2 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/routes/(app)/[username]/collection/characters/+page.svelte
View file

@ -90,7 +90,6 @@
const isLoading = $derived(collectionQuery.isLoading) const isLoading = $derived(collectionQuery.isLoading)
const isEmpty = $derived(!isLoading && allCharacters.length === 0) const isEmpty = $derived(!isLoading && allCharacters.length === 0)
const showSentinel = $derived(collectionQuery.hasNextPage && !collectionQuery.isFetchingNextPage)
// Current view mode from store // Current view mode from store
const currentViewMode = $derived(viewMode.collectionView) const currentViewMode = $derived(viewMode.collectionView)
@ -185,9 +184,12 @@
{/if} {/if}
{#if !isLoading && !isEmpty} {#if !isLoading && !isEmpty}
{#if showSentinel} <!-- Sentinel always in DOM to avoid Svelte block tracking issues during rapid updates -->
<div class="load-more-sentinel" bind:this={sentinelEl}></div> <div
{/if} class="load-more-sentinel"
bind:this={sentinelEl}
class:hidden={!collectionQuery.hasNextPage}
></div>
{#if collectionQuery.isFetchingNextPage} {#if collectionQuery.isFetchingNextPage}
<div class="loading-more"> <div class="loading-more">
@ -195,7 +197,6 @@
<span>Loading more...</span> <span>Loading more...</span>
</div> </div>
{/if} {/if}
{/if} {/if}
</div> </div>
</div> </div>
@ -267,6 +268,10 @@
.load-more-sentinel { .load-more-sentinel {
height: 1px; height: 1px;
margin-top: $unit; margin-top: $unit;
&.hidden {
display: none;
}
} }
.loading-more { .loading-more {

15
src/routes/(app)/[username]/collection/weapons/+page.svelte
View file

@ -88,7 +88,6 @@
const isLoading = $derived(collectionQuery.isLoading) const isLoading = $derived(collectionQuery.isLoading)
const isEmpty = $derived(!isLoading && allWeapons.length === 0) const isEmpty = $derived(!isLoading && allWeapons.length === 0)
const showSentinel = $derived(collectionQuery.hasNextPage && !collectionQuery.isFetchingNextPage)
// Current view mode from store // Current view mode from store
const currentViewMode = $derived(viewMode.collectionView) const currentViewMode = $derived(viewMode.collectionView)
@ -173,9 +172,12 @@
{/if} {/if}
{#if !isLoading && !isEmpty} {#if !isLoading && !isEmpty}
{#if showSentinel} <!-- Sentinel always in DOM to avoid Svelte block tracking issues during rapid updates -->
<div class="load-more-sentinel" bind:this={sentinelEl}></div> <div
{/if} class="load-more-sentinel"
bind:this={sentinelEl}
class:hidden={!collectionQuery.hasNextPage}
></div>
{#if collectionQuery.isFetchingNextPage} {#if collectionQuery.isFetchingNextPage}
<div class="loading-more"> <div class="loading-more">
@ -183,7 +185,6 @@
<span>Loading more...</span> <span>Loading more...</span>
</div> </div>
{/if} {/if}
{/if} {/if}
</div> </div>
</div> </div>
@ -255,6 +256,10 @@
.load-more-sentinel { .load-more-sentinel {
height: 1px; height: 1px;
margin-top: $unit; margin-top: $unit;
&.hidden {
display: none;
}
} }
.loading-more { .loading-more {