You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 :)
The text was updated successfully, but these errors were encountered:
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?
thanks :)
The text was updated successfully, but these errors were encountered: