From 7cac17a043c30c4a7dce28d088285e5f77bf30bf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 27 Mar 2024 08:09:24 +0800
Subject: [PATCH] Need Loader fallbacks

---
 src/components/intl-segmenter-suspense.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/intl-segmenter-suspense.jsx b/src/components/intl-segmenter-suspense.jsx
index 965c69b5..9e56ab1e 100644
--- a/src/components/intl-segmenter-suspense.jsx
+++ b/src/components/intl-segmenter-suspense.jsx
@@ -2,11 +2,13 @@ import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
 import { Suspense } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
+import Loader from './loader';
+
 const supportsIntlSegmenter = !shouldPolyfill();
 
 export default function IntlSegmenterSuspense({ children }) {
   if (supportsIntlSegmenter) {
-    return <Suspense>{children}</Suspense>;
+    return <Suspense fallback={<Loader />}>{children}</Suspense>;
   }
 
   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 />
+  );
 }