diff --git a/src/components/compose-suspense.jsx b/src/components/compose-suspense.jsx
new file mode 100644
index 00000000..63864bba
--- /dev/null
+++ b/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 ? : ;
+}
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 4dcda8ee..4a855333 100644
--- a/src/components/modals.jsx
+++ b/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,6 +33,10 @@ export default function Modals() {
const navigate = useNavigate();
const location = useLocation();
+ useEffect(() => {
+ queueMicrotask(preload);
+ }, []);
+
return (
<>
{!!snapStates.showCompose && (
@@ -43,51 +44,49 @@ export default function Modals() {
class={`solid ${snapStates.composerState.minimized ? 'min' : ''}`}
minimized={!!snapStates.composerState.minimized}
>
-
- {
+ 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}`,
+ );
+ },
+ });
}
- 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}`,
- );
- },
- });
- }
- }}
- />
-
+ }}
+ />
)}
{!!snapStates.showSettings && (
diff --git a/src/compose.jsx b/src/compose.jsx
index 4f2607bc..a3aaccf5 100644
--- a/src/compose.jsx
+++ b/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 (
-
- {
- const { newStatus, fn = () => {} } = results || {};
- try {
- if (newStatus) {
- window.opener.__STATES__.reloadStatusPage++;
- }
- fn();
- setUIState('closed');
- } catch (e) {}
- }}
- />
-
+ {
+ const { newStatus, fn = () => {} } = results || {};
+ try {
+ if (newStatus) {
+ window.opener.__STATES__.reloadStatusPage++;
+ }
+ fn();
+ setUIState('closed');
+ } catch (e) {}
+ }}
+ />
);
}