Need Loader fallbacks

This commit is contained in:
Lim Chee Aun 2024-03-27 08:09:24 +08:00
parent 7049166b40
commit 7cac17a043

View file

@ -2,11 +2,13 @@ import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
import { Suspense } from 'preact/compat'; import { Suspense } from 'preact/compat';
import { useEffect, useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
import Loader from './loader';
const supportsIntlSegmenter = !shouldPolyfill(); const supportsIntlSegmenter = !shouldPolyfill();
export default function IntlSegmenterSuspense({ children }) { export default function IntlSegmenterSuspense({ children }) {
if (supportsIntlSegmenter) { if (supportsIntlSegmenter) {
return <Suspense>{children}</Suspense>; return <Suspense fallback={<Loader />}>{children}</Suspense>;
} }
const [polyfillLoaded, setPolyfillLoaded] = useState(false); const [polyfillLoaded, setPolyfillLoaded] = useState(false);
@ -17,5 +19,9 @@ export default function IntlSegmenterSuspense({ children }) {
})(); })();
}, []); }, []);
return polyfillLoaded && <Suspense>{children}</Suspense>; return polyfillLoaded ? (
<Suspense fallback={<Loader />}>{children}</Suspense>
) : (
<Loader />
);
} }