Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte infinitegrid flash of assets before correctly setting the correct absolute position #584

Open
JohnRSim opened this issue Jan 29, 2025 · 0 comments

Comments

@JohnRSim
Copy link

JohnRSim commented Jan 29, 2025

When updating and appending the items - I'm getting a momentary flash of new DOM elements appear left side of the screen and then snap into position correctly.

The existing groups in the items appear fine - it is just the new group that is added to the items causes a flicker?

Should I be doing something ie hide the element to prevent this flicker if it is a new group before the position has been correctly set maybe with the on:renderComplete?


			<JustifiedInfiniteGrid
				on:contentError={({ detail: e }) => {
					//console.error('[JustifiedInfiniteGrid][Error]',e)
				}}
				on:requestPrepend={({ detail: e }) => {
					//console.log('[JustifiedInfiniteGrid][requestPrepend]',e);
				}}
				on:changeScroll={({ detail: e }) => {
					//console.log('[JustifiedInfiniteGrid][changeScroll]',e);
				}}
				on:renderComplete={({ detail: e }) => {
					console.log('[renderComplete]',e)
					
				}}
				on:requestAppend={({ detail: e }) => {
					//console.log('[JustifiedInfiniteGrid][requestAppend]',e);
					//console.log('xxx',items.length, assets?.items.length,e.groupKey)
					//return;
					//only display based on total assets
					if (items.length < assets?.items.length) {
						// console.log('[JustifiedInfiniteGrid][more items to display]');
							
						e.wait();
						const nextGroupKey = (+e.groupKey || 0) + 1;
						console.log('nextGroupKey',nextGroupKey);
						if (nextGroupKey >= lastGroupKey) {
							console.log('->getting')
							items = [...items, ...getItems(nextGroupKey, groupBy)];
							lastGroupKey = nextGroupKey;
						}
						console.log('lastGroupKey',lastGroupKey);
						
						e.ready();
						//console.log("items", items.length);
					} else {
						if (((items.length-1) >= assets.count) || (items.length < groupBy)) {
							console.log('[JustifiedInfiniteGrid][no more items to display]',items.length, assets?.items.length,assets.count);
							//e.ready();
						} else {
							console.log('[JustifiedInfiniteGrid][requesting more items]');
							loadingMore = true;

							e.wait();
							//store active grid request
							gridRequest = e;

							//request more data
							dispatchEvent({
								action: 'loadMore',
							});
						}

					}
				}}
				bind:this={gridContainer}
				let:visibleItems
				scrollContainer=".CMB-AssetPanel"
				class="infContainer"
				gap={20}
				isEqualSize={true}
				isConstantSize={false}
				rowRang={0}
				autoResize={true}
				isCroppedSize={false}
				useTransform={false}
				columnRange={1,columns}
				{items}
			>
				{#each visibleItems as item (item.key)}

<GridCard key={item.key} asset={assets.items[item.key]}/>

thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant