Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
When I use Flashlist then scrolling through a large list using FlashList on the web, it momentarily shows a blank screen.
<FlashList
data={data}
renderItem={getRenderItemView}
keyExtractor={getKeyExtractor}
estimatedItemSize={65}
contentInsetAdjustmentBehavior="automatic"
ListFooterComponent={renderFooter()}
/>
Try implementing progressive loading instead of loading all data at once, load data in chunks as the user scrolls.
import React, { useState, useCallback } from 'react';
import { FlashList } from '@shopify/flash-list';
const ProgressiveLoadingList = () => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [page, setPage] = useState(1);
const loadMoreData = useCallback(async () => {
if (isLoading) return;
setIsLoading(true);
try {
// Replace this with your actual API call
const newData = await fetchData(page);
setData(prevData => [...prevData, ...newData]);
setPage(prevPage => prevPage + 1);
} catch (error) {
console.error('Error loading more data:', error);
} finally {
setIsLoading(false);
}
}, [isLoading, page]);
const renderItem = ({ item }) => (
// Your render item logic here
);
const renderFooter = () => {
if (!isLoading) return null;
return <ActivityIndicator size="large" />;
};
return (
<FlashList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
estimatedItemSize={100}
onEndReached={loadMoreData}
onEndReachedThreshold={0.5}
ListFooterComponent={renderFooter}
/>
);
};
export default ProgressiveLoadingList;
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025