← All changes | src/Library/components/ModalContent.jsx +11 -3 3.0.4 → trunk View file →

		@@ -1,8 +1,10 @@
1	1	import { BlockPreviewButton } from '@library/components/BlockPreviewButton';
2	2	import { usePatterns } from '@library/hooks/usePatterns';
	3	+import { useSiteImages } from '@library/hooks/useSiteImages';
	4	+import { replacePatternImages } from '@library/util/replace-pattern-images';
3	5	import { Spinner } from '@wordpress/components';
4		-import { useEffect, useState } from '@wordpress/element';
	6	+import { useEffect, useMemo, useState } from '@wordpress/element';
5	7	import { __ } from '@wordpress/i18n';
6	8	import { useInView } from 'react-intersection-observer';
7	9	import Masonry from 'react-masonry-css';
8	10
		@@ -9,8 +11,10 @@
9	11	export const ModalContent = ({ insertPattern, category }) => {
10	12	const { data, isLoading, setSize } = usePatterns({
11	13	category,
12	14	});
	15	+ const { siteImages } = useSiteImages();
	16	+ const sessionSeed = useMemo(() => Math.random().toString(36), []);
13	17	const [showLoading, setShowLoading] = useState(true);
14	18	const [loadMoreRef, inView] = useInView();
15	19	const noMore = data?.at(-1)?.length < 9; // hard coded for now
16	20
		@@ -57,15 +61,19 @@
57	61	p.map(({ id, code, patternReplacementCode }) => (
58	62	<BlockPreviewButton
59	63	key={id}
60	64	insertPattern={insertPattern}
61		- code={patternReplacementCode ?? code}
	65	+ code={replacePatternImages(
	66	+ patternReplacementCode ?? code,
	67	+ siteImages,
	68	+ `${id}-${sessionSeed}`,
	69	+ )}
62	70	/>
63	71	)),
64	72	)}
65	73	</Masonry>
66	74	{showLoading ? (
67		- <div className="absolute inset-0 z-0 flex flex-col items-center justify-center text-center">
	75	+ <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
68	76	<Spinner />
69	77	<span className="sr-only">
70	78	{__('Loading Patterns...', 'extendify-local')}
71	79	</span>