chore: lazy loading
This commit is contained in:
Alexander Medvedev
parent
8a7feb93e8
commit
d0e3121391
@ -18,39 +18,67 @@ const Home = () => {
|
||||
const [topPaid, setTopPaid] = useState<any[]>(homeCache?.topPaid || []);
|
||||
const [popular, setPopular] = useState<any[]>(homeCache?.popular || []);
|
||||
const [newest, setNewest] = useState<any[]>(homeCache?.newest || []);
|
||||
const [loading, setLoading] = useState(!homeCache);
|
||||
const hasFetched = useRef(!!homeCache);
|
||||
// Load sections lazily when the user scrolls them into view
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (hasFetched.current) return;
|
||||
const topPaidRef = useRef<HTMLElement | null>(null);
|
||||
const popularRef = useRef<HTMLElement | null>(null);
|
||||
const newestRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
const fetchSections = async () => {
|
||||
try {
|
||||
const [topPaidRes, popularRes, newestRes] = await Promise.all([
|
||||
api.get('/plugins', { params: { type: 'paid', sort: 'downloads', limit: 4 } }),
|
||||
api.get('/plugins', { params: { sort: 'downloads', limit: 8 } }),
|
||||
api.get('/plugins', { params: { sort: 'newest', limit: 12 } })
|
||||
]);
|
||||
const fetched = useRef({ topPaid: !!homeCache?.topPaid, popular: !!homeCache?.popular, newest: !!homeCache?.newest });
|
||||
|
||||
const data = {
|
||||
topPaid: Array.isArray(topPaidRes.data) ? topPaidRes.data : [],
|
||||
popular: Array.isArray(popularRes.data) ? popularRes.data : [],
|
||||
newest: Array.isArray(newestRes.data) ? newestRes.data : []
|
||||
};
|
||||
const saveSection = (key: 'topPaid' | 'popular' | 'newest', data: any[]) => {
|
||||
if (key === 'topPaid') setTopPaid(data);
|
||||
if (key === 'popular') setPopular(data);
|
||||
if (key === 'newest') setNewest(data);
|
||||
|
||||
setTopPaid(data.topPaid);
|
||||
setPopular(data.popular);
|
||||
setNewest(data.newest);
|
||||
homeCache = data;
|
||||
hasFetched.current = true;
|
||||
} catch (err) {
|
||||
console.error('Fetch error:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
homeCache = {
|
||||
topPaid: key === 'topPaid' ? data : homeCache?.topPaid || [],
|
||||
popular: key === 'popular' ? data : homeCache?.popular || [],
|
||||
newest: key === 'newest' ? data : homeCache?.newest || []
|
||||
};
|
||||
|
||||
fetchSections();
|
||||
fetched.current[key] = true;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (fetched.current.topPaid && fetched.current.popular && fetched.current.newest) return;
|
||||
|
||||
const observers: IntersectionObserver[] = [];
|
||||
|
||||
const createObserver = (el: HTMLElement | null, key: 'topPaid' | 'popular' | 'newest', params: any) => {
|
||||
if (!el || fetched.current[key]) return;
|
||||
const obs = new IntersectionObserver(async (entries, observer) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
fetched.current[key] = true; // prevent duplicate triggers
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await api.get('/plugins', { params });
|
||||
const list = Array.isArray(res.data) ? res.data : [];
|
||||
saveSection(key, list);
|
||||
} catch (err) {
|
||||
console.error('Fetch error for', key, err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
observer.disconnect();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, { rootMargin: '200px' });
|
||||
|
||||
obs.observe(el);
|
||||
observers.push(obs);
|
||||
};
|
||||
|
||||
// Ensure refs are attached before creating observers
|
||||
requestAnimationFrame(() => {
|
||||
createObserver(topPaidRef.current, 'topPaid', { type: 'paid', sort: 'downloads', limit: 4 });
|
||||
createObserver(popularRef.current, 'popular', { sort: 'downloads', limit: 8 });
|
||||
createObserver(newestRef.current, 'newest', { sort: 'newest', limit: 12 });
|
||||
});
|
||||
|
||||
return () => observers.forEach(o => o.disconnect());
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
@ -75,36 +103,46 @@ const Home = () => {
|
||||
</section>
|
||||
|
||||
<div className="container" id="browse">
|
||||
{topPaid.length > 0 && (
|
||||
<section className="home-section">
|
||||
<h2 className="section-title"><span>Top</span> Premium</h2>
|
||||
<div className="home-plugin-grid">
|
||||
{topPaid.map((plugin) => (
|
||||
<section className="home-section" ref={topPaidRef}>
|
||||
<h2 className="section-title"><span>Top</span> Premium</h2>
|
||||
<div className="home-plugin-grid">
|
||||
{topPaid.length > 0 ? (
|
||||
topPaid.map((plugin) => (
|
||||
<PluginCard key={`top-${plugin.id}`} plugin={plugin} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
))
|
||||
) : (
|
||||
<div className="section-placeholder">{loading ? 'Loading premium plugins...' : 'Scroll to load premium plugins'}</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-section">
|
||||
<section className="home-section" ref={popularRef}>
|
||||
<h2 className="section-title"><span>Most</span> Popular</h2>
|
||||
<div className="home-plugin-grid">
|
||||
{popular.map((plugin) => (
|
||||
<PluginCard key={`pop-${plugin.id}`} plugin={plugin} />
|
||||
))}
|
||||
{popular.length > 0 ? (
|
||||
popular.map((plugin) => (
|
||||
<PluginCard key={`pop-${plugin.id}`} plugin={plugin} />
|
||||
))
|
||||
) : (
|
||||
<div className="section-placeholder">{loading ? 'Loading popular plugins...' : 'Scroll to load popular plugins'}</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-section">
|
||||
<section className="home-section" ref={newestRef}>
|
||||
<h2 className="section-title"><span>New</span> & Trending</h2>
|
||||
<div className="home-plugin-grid">
|
||||
{newest.map((plugin) => (
|
||||
<PluginCard key={`new-${plugin.id}`} plugin={plugin} />
|
||||
))}
|
||||
{newest.length > 0 ? (
|
||||
newest.map((plugin) => (
|
||||
<PluginCard key={`new-${plugin.id}`} plugin={plugin} />
|
||||
))
|
||||
) : (
|
||||
<div className="section-placeholder">{loading ? 'Loading new plugins...' : 'Scroll to load new plugins'}</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{topPaid.length === 0 && popular.length === 0 && newest.length === 0 && (
|
||||
{(fetched.current?.topPaid && fetched.current?.popular && fetched.current?.newest && topPaid.length === 0 && popular.length === 0 && newest.length === 0) && (
|
||||
<div className="empty-state">
|
||||
<p>No plugins found. Check back later!</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user