import { BlockPreviewButton } from '@library/components/BlockPreviewButton'; import { usePatterns } from '@library/hooks/usePatterns'; import { useSiteImages } from '@library/hooks/useSiteImages'; import { replacePatternImages } from '@library/util/replace-pattern-images'; import { Spinner } from '@wordpress/components'; import { useEffect, useMemo, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { useInView } from 'react-intersection-observer'; import Masonry from 'react-masonry-css'; export const ModalContent = ({ insertPattern, category }) => { const { data, isLoading, setSize } = usePatterns({ category, }); const { siteImages } = useSiteImages(); const sessionSeed = useMemo(() => Math.random().toString(36), []); const [showLoading, setShowLoading] = useState(true); const [loadMoreRef, inView] = useInView(); const noMore = data?.at(-1)?.length < 9; // hard coded for now useEffect(() => { if (isLoading) { return setShowLoading(true); } const id = setTimeout(() => { setShowLoading(false); }, 750); return () => clearTimeout(id); }, [isLoading]); useEffect(() => { if (!inView || isLoading) return; setSize((size) => size + 1); }, [inView, isLoading, setSize]); if (isLoading || !data?.length) { return (
{__('Loading Patterns...', 'extendify-local')}
); } return ( <> {data.map((p) => p.map(({ id, code, patternReplacementCode }) => ( )), )} {showLoading ? (
{__('Loading Patterns...', 'extendify-local')}
) : null} {showLoading || noMore ? null : (
{__('Loading more patterns...', 'extendify-local')}
)} ); };