Pumpkin-MC/Market-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: lazy loading

Browse Source
This commit is contained in:
Alexander Medvedev 2026-06-23 13:38:03 +02:00
parent 8a7feb93e8
commit d0e3121391
1 changed files with 84 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/pages/Home.tsx
View File

@ -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);
const topPaidRef = useRef<HTMLElement | null>(null);
const popularRef = useRef<HTMLElement | null>(null);
const newestRef = useRef<HTMLElement | null>(null);
const fetched = useRef({ topPaid: !!homeCache?.topPaid, popular: !!homeCache?.popular, newest: !!homeCache?.newest });
const saveSection = (key: 'topPaid' | 'popular' | 'newest', data: any[]) => {
if (key === 'topPaid') setTopPaid(data);
if (key === 'popular') setPopular(data);
if (key === 'newest') setNewest(data);
homeCache = {
topPaid: key === 'topPaid' ? data : homeCache?.topPaid || [],
popular: key === 'popular' ? data : homeCache?.popular || [],
newest: key === 'newest' ? data : homeCache?.newest || []
};
fetched.current[key] = true;
};
useEffect(() => {
if (hasFetched.current) return;
if (fetched.current.topPaid && fetched.current.popular && fetched.current.newest) return;
const fetchSections = async () => {
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 {
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 data = {
topPaid: Array.isArray(topPaidRes.data) ? topPaidRes.data : [],
popular: Array.isArray(popularRes.data) ? popularRes.data : [],
newest: Array.isArray(newestRes.data) ? newestRes.data : []
};
setTopPaid(data.topPaid);
setPopular(data.popular);
setNewest(data.newest);
homeCache = data;
hasFetched.current = true;
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:', err);
console.error('Fetch error for', key, err);
} finally {
setLoading(false);
observer.disconnect();
}
}
}
}, { rootMargin: '200px' });
obs.observe(el);
observers.push(obs);
};
fetchSections();
// 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">
<section className="home-section" ref={topPaidRef}>
<h2 className="section-title"><span>Top</span> Premium</h2>
<div className="home-plugin-grid">
{topPaid.map((plugin) => (
{topPaid.length > 0 ? (
topPaid.map((plugin) => (
<PluginCard key={`top-${plugin.id}`} plugin={plugin} />
))}
))
) : (
<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) => (
{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) => (
{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>