Rewrite polyfill suspense for Composer with preload

Hopefully this works

src/components/compose-suspense.jsx

@@ -0,0 +1,48 @@
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { useEffect, useState } from 'preact/hooks';
+
+import Loader from './loader';
+
+const supportsIntlSegmenter = !shouldPolyfill();
+
+function importIntlSegmenter() {
+  if (!supportsIntlSegmenter) {
+    return import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+  }
+}
+
+function importCompose() {
+  return import('./compose');
+}
+
+export async function preload() {
+  try {
+    await importIntlSegmenter();
+    importCompose();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export default function ComposeSuspense(props) {
+  const [Compose, setCompose] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (supportsIntlSegmenter) {
+          const component = await importCompose();
+          setCompose(component);
+        } else {
+          await importIntlSegmenter();
+          const component = await importCompose();
+          setCompose(component);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, []);
+
+  return Compose?.default ? <Compose.default {...props} /> : <Loader />;
+}

src/components/modals.jsx

@@ -1,4 +1,4 @@
-import { lazy } from 'preact/compat';
+import { useEffect } from 'preact/hooks';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { subscribe, useSnapshot } from 'valtio';
 
@@ -9,19 +9,16 @@ import showToast from '../utils/show-toast';
 import states from '../utils/states';
 
 import AccountSheet from './account-sheet';
-// import Compose from './compose';
+import ComposeSuspense, { preload } from './compose-suspense';
 import Drafts from './drafts';
 import EmbedModal from './embed-modal';
 import GenericAccounts from './generic-accounts';
-import IntlSegmenterSuspense from './intl-segmenter-suspense';
 import MediaAltModal from './media-alt-modal';
 import MediaModal from './media-modal';
 import Modal from './modal';
 import ReportModal from './report-modal';
 import ShortcutsSettings from './shortcuts-settings';
 
-const Compose = lazy(() => import('./compose'));
-
 subscribe(states, (changes) => {
   for (const [action, path, value, prevValue] of changes) {
     // When closing modal, focus on deck
@@ -36,58 +33,60 @@ export default function Modals() {
   const navigate = useNavigate();
   const location = useLocation();
 
+  useEffect(() => {
+    queueMicrotask(preload);
+  }, []);
+
   return (
     <>
       {!!snapStates.showCompose && (
         <Modal
           class={`solid ${snapStates.composerState.minimized ? 'min' : ''}`}
           minimized={!!snapStates.composerState.minimized}
         >
-          <IntlSegmenterSuspense>
-            <Compose
-              replyToStatus={
-                typeof snapStates.showCompose !== 'boolean'
-                  ? snapStates.showCompose.replyToStatus
-                  : window.__COMPOSE__?.replyToStatus || null
-              }
-              editStatus={
-                states.showCompose?.editStatus ||
-                window.__COMPOSE__?.editStatus ||
-                null
-              }
-              draftStatus={
-                states.showCompose?.draftStatus ||
-                window.__COMPOSE__?.draftStatus ||
-                null
+          <ComposeSuspense
+            replyToStatus={
+              typeof snapStates.showCompose !== 'boolean'
+                ? snapStates.showCompose.replyToStatus
+                : window.__COMPOSE__?.replyToStatus || null
+            }
+            editStatus={
+              states.showCompose?.editStatus ||
+              window.__COMPOSE__?.editStatus ||
+              null
+            }
+            draftStatus={
+              states.showCompose?.draftStatus ||
+              window.__COMPOSE__?.draftStatus ||
+              null
+            }
+            onClose={(results) => {
+              const { newStatus, instance, type } = results || {};
+              states.showCompose = false;
+              window.__COMPOSE__ = null;
+              if (newStatus) {
+                states.reloadStatusPage++;
+                showToast({
+                  text: {
+                    post: 'Post published. Check it out.',
+                    reply: 'Reply posted. Check it out.',
+                    edit: 'Post updated. Check it out.',
+                  }[type || 'post'],
+                  delay: 1000,
+                  duration: 10_000, // 10 seconds
+                  onClick: (toast) => {
+                    toast.hideToast();
+                    states.prevLocation = location;
+                    navigate(
+                      instance
+                        ? `/${instance}/s/${newStatus.id}`
+                        : `/s/${newStatus.id}`,
+                    );
+                  },
+                });
               }
-              onClose={(results) => {
-                const { newStatus, instance, type } = results || {};
-                states.showCompose = false;
-                window.__COMPOSE__ = null;
-                if (newStatus) {
-                  states.reloadStatusPage++;
-                  showToast({
-                    text: {
-                      post: 'Post published. Check it out.',
-                      reply: 'Reply posted. Check it out.',
-                      edit: 'Post updated. Check it out.',
-                    }[type || 'post'],
-                    delay: 1000,
-                    duration: 10_000, // 10 seconds
-                    onClick: (toast) => {
-                      toast.hideToast();
-                      states.prevLocation = location;
-                      navigate(
-                        instance
-                          ? `/${instance}/s/${newStatus.id}`
-                          : `/s/${newStatus.id}`,
-                      );
-                    },
-                  });
-                }
-              }}
-            />
-          </IntlSegmenterSuspense>
+            }}
+          />
         </Modal>
       )}
       {!!snapStates.showSettings && (

src/compose.jsx

@@ -3,16 +3,12 @@ import './index.css';
 import './app.css';
 
 import { render } from 'preact';
-import { lazy } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
-import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
+import ComposeSuspense from './components/compose-suspense';
 import { initStates } from './utils/states';
-// import Compose from './components/compose';
 import useTitle from './utils/useTitle';
 
-const Compose = lazy(() => import('./components/compose'));
-
 if (window.opener) {
   console = window.opener.console;
 }
@@ -66,25 +62,23 @@ function App() {
   console.debug('OPEN COMPOSE');
 
   return (
-    <IntlSegmenterSuspense>
-      <Compose
-        editStatus={editStatus}
-        replyToStatus={replyToStatus}
-        draftStatus={draftStatus}
-        standalone
-        hasOpener={window.opener}
-        onClose={(results) => {
-          const { newStatus, fn = () => {} } = results || {};
-          try {
-            if (newStatus) {
-              window.opener.__STATES__.reloadStatusPage++;
-            }
-            fn();
-            setUIState('closed');
-          } catch (e) {}
-        }}
-      />
-    </IntlSegmenterSuspense>
+    <ComposeSuspense
+      editStatus={editStatus}
+      replyToStatus={replyToStatus}
+      draftStatus={draftStatus}
+      standalone
+      hasOpener={window.opener}
+      onClose={(results) => {
+        const { newStatus, fn = () => {} } = results || {};
+        try {
+          if (newStatus) {
+            window.opener.__STATES__.reloadStatusPage++;
+          }
+          fn();
+          setUIState('closed');
+        } catch (e) {}
+      }}
+    />
   );
 }