diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx index 84b5bf306..92882f98f 100644 --- a/app/soapbox/components/loading-screen.tsx +++ b/app/soapbox/components/loading-screen.tsx @@ -6,7 +6,7 @@ import { Spinner } from 'soapbox/components/ui'; /** Fullscreen loading indicator. */ const LoadingScreen: React.FC = () => { return ( -
+
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 2d339fea5..b9f41a464 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -16,10 +16,13 @@ import * as BuildConfig from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; import LoadingScreen from 'soapbox/components/loading-screen'; import AuthLayout from 'soapbox/features/auth_layout'; -import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard'; import PublicLayout from 'soapbox/features/public_layout'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; -import { ModalContainer, NotificationsContainer } from 'soapbox/features/ui/util/async-components'; +import { + ModalContainer, + NotificationsContainer, + OnboardingWizard, +} from 'soapbox/features/ui/util/async-components'; import WaitlistPage from 'soapbox/features/verification/waitlist_page'; import { createGlobals } from 'soapbox/globals'; import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks'; @@ -142,20 +145,11 @@ const SoapboxMount = () => { ); - /** Render loading screen. */ - const renderLoading = () => ( - <> - {helmet} - - - ); - /** Render the onboarding flow. */ const renderOnboarding = () => ( - <> - - - + + {(Component) => } + ); /** Render the auth layout or UI. */ @@ -215,7 +209,12 @@ const SoapboxMount = () => { // intl is part of loading. // It's important nothing in here depends on intl. if (showLoading) { - return renderLoading(); + return ( + <> + {helmet} + + + ); } return ( @@ -224,15 +223,17 @@ const SoapboxMount = () => { - {renderBody()} + <> + {renderBody()} - - {(Component) => } - + + {(Component) => } + - - {Component => } - + + {Component => } + + diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index 34d2f36b9..53efab79f 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -494,6 +494,10 @@ export function DatePicker() { return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker'); } +export function OnboardingWizard() { + return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/onboarding-wizard'); +} + export function CompareHistoryModal() { return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal'); }