diff --git a/src/containers/soapbox-mount.tsx b/src/containers/soapbox-mount.tsx
new file mode 100644
index 000000000..bbc911691
--- /dev/null
+++ b/src/containers/soapbox-mount.tsx
@@ -0,0 +1,105 @@
+import React, { Suspense } from 'react';
+import { Toaster } from 'react-hot-toast';
+import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+// @ts-ignore: it doesn't have types
+import { ScrollContext } from 'react-router-scroll-4';
+
+import * as BuildConfig from 'soapbox/build-config';
+import LoadingScreen from 'soapbox/components/loading-screen';
+import {
+ ModalContainer,
+ OnboardingWizard,
+} from 'soapbox/features/ui/util/async-components';
+import {
+ useAppSelector,
+ useOwnAccount,
+ useSoapboxConfig,
+} from 'soapbox/hooks';
+import { useCachedLocationHandler } from 'soapbox/utils/redirect';
+
+import ErrorBoundary from '../components/error-boundary';
+
+const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
+const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
+const UI = React.lazy(() => import('soapbox/features/ui'));
+
+/** Highest level node with the Redux store. */
+const SoapboxMount = () => {
+ useCachedLocationHandler();
+
+ const me = useAppSelector(state => state.me);
+ const { account } = useOwnAccount();
+ const soapboxConfig = useSoapboxConfig();
+
+ const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
+ const showOnboarding = account && needsOnboarding;
+ const { redirectRootNoLogin } = soapboxConfig;
+
+ // @ts-ignore: I don't actually know what these should be, lol
+ const shouldUpdateScroll = (prevRouterProps, { location }) => {
+ return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
+ };
+
+ /** Render the onboarding flow. */
+ const renderOnboarding = () => (
+ }>
+
+
+ );
+
+ /** Render the auth layout or UI. */
+ const renderSwitch = () => (
+
+ {(!me && redirectRootNoLogin) && (
+
+ )}
+
+
+
+ );
+
+ /** Render the onboarding flow or UI. */
+ const renderBody = () => {
+ if (showOnboarding) {
+ return renderOnboarding();
+ } else {
+ return renderSwitch();
+ }
+ };
+
+ return (
+
+
+
+
+
+ }
+ />
+
+
+
+ {renderBody()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SoapboxMount;
diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx
index 84ba16831..63cfb3d9e 100644
--- a/src/containers/soapbox.tsx
+++ b/src/containers/soapbox.tsx
@@ -1,23 +1,10 @@
import { QueryClientProvider } from '@tanstack/react-query';
import clsx from 'clsx';
-import React, { Suspense } from 'react';
-import { Toaster } from 'react-hot-toast';
+import React from 'react';
import { Provider } from 'react-redux';
-import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
-// @ts-ignore: it doesn't have types
-import { ScrollContext } from 'react-router-scroll-4';
-import * as BuildConfig from 'soapbox/build-config';
-import LoadingScreen from 'soapbox/components/loading-screen';
import { StatProvider } from 'soapbox/contexts/stat-context';
import {
- ModalContainer,
- OnboardingWizard,
-} from 'soapbox/features/ui/util/async-components';
-import {
- useAppSelector,
- useOwnAccount,
useSentry,
useSettings,
useSoapboxConfig,
@@ -26,97 +13,14 @@ import {
} from 'soapbox/hooks';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import { queryClient } from 'soapbox/queries/client';
-import { useCachedLocationHandler } from 'soapbox/utils/redirect';
import { generateThemeCss } from 'soapbox/utils/theme';
-import ErrorBoundary from '../components/error-boundary';
import { store } from '../store';
import SoapboxLoad from './soapbox-load';
+import SoapboxMount from './soapbox-mount';
-const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
const Helmet = React.lazy(() => import('soapbox/components/helmet'));
-const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
-const UI = React.lazy(() => import('soapbox/features/ui'));
-
-/** Highest level node with the Redux store. */
-const SoapboxMount = () => {
- useCachedLocationHandler();
-
- const me = useAppSelector(state => state.me);
- const { account } = useOwnAccount();
- const soapboxConfig = useSoapboxConfig();
-
- const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
- const showOnboarding = account && needsOnboarding;
- const { redirectRootNoLogin } = soapboxConfig;
-
- // @ts-ignore: I don't actually know what these should be, lol
- const shouldUpdateScroll = (prevRouterProps, { location }) => {
- return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
- };
-
- /** Render the onboarding flow. */
- const renderOnboarding = () => (
- }>
-
-
- );
-
- /** Render the auth layout or UI. */
- const renderSwitch = () => (
-
- {(!me && redirectRootNoLogin) && (
-
- )}
-
-
-
- );
-
- /** Render the onboarding flow or UI. */
- const renderBody = () => {
- if (showOnboarding) {
- return renderOnboarding();
- } else {
- return renderSwitch();
- }
- };
-
- return (
-
-
-
-
-
- }
- />
-
-
-
- {renderBody()}
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
interface ISoapboxHead {
children: React.ReactNode;
}