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) {} + }} + /> ); }