moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SoapboxMount: load onboarding flow async, refactor

This commit is contained in:
Alex Gleason 2022-05-20 13:13:17 -05:00
parent e298115fcf
commit f0ba5a5a8c
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/loading-screen.tsx
View File

@ -6,7 +6,7 @@ import { Spinner } from 'soapbox/components/ui';
/** Fullscreen loading indicator. */ /** Fullscreen loading indicator. */
const LoadingScreen: React.FC = () => { const LoadingScreen: React.FC = () => {
return ( return (
<div className='fixed h-screen w-screen bg-white dark:bg-slate-900'> <div className='fixed h-screen w-screen'>
<LandingGradient /> <LandingGradient />
<div className='fixed h-screen w-screen flex items-center justify-center z-10'> <div className='fixed h-screen w-screen flex items-center justify-center z-10'>

45
app/soapbox/containers/soapbox.tsx
View File

@ -16,10 +16,13 @@ import * as BuildConfig from 'soapbox/build_config';
import Helmet from 'soapbox/components/helmet'; import Helmet from 'soapbox/components/helmet';
import LoadingScreen from 'soapbox/components/loading-screen'; import LoadingScreen from 'soapbox/components/loading-screen';
import AuthLayout from 'soapbox/features/auth_layout'; import AuthLayout from 'soapbox/features/auth_layout';
import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
import PublicLayout from 'soapbox/features/public_layout'; import PublicLayout from 'soapbox/features/public_layout';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; 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 WaitlistPage from 'soapbox/features/verification/waitlist_page';
import { createGlobals } from 'soapbox/globals'; import { createGlobals } from 'soapbox/globals';
import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
@ -142,20 +145,11 @@ const SoapboxMount = () => {
</Helmet> </Helmet>
); );
/** Render loading screen. */
const renderLoading = () => (
<>
{helmet}
<LoadingScreen />
</>
);
/** Render the onboarding flow. */ /** Render the onboarding flow. */
const renderOnboarding = () => ( const renderOnboarding = () => (
<> <BundleContainer fetchComponent={OnboardingWizard} loading={LoadingScreen}>
<OnboardingWizard /> {(Component) => <Component />}
<NotificationsContainer /> </BundleContainer>
</>
); );
/** Render the auth layout or UI. */ /** Render the auth layout or UI. */
@ -215,7 +209,12 @@ const SoapboxMount = () => {
// intl is part of loading. // intl is part of loading.
// It's important nothing in here depends on intl. // It's important nothing in here depends on intl.
if (showLoading) { if (showLoading) {
return renderLoading(); return (
<>
{helmet}
<LoadingScreen />
</>
);
} }
return ( return (
@ -224,15 +223,17 @@ const SoapboxMount = () => {
<ErrorBoundary> <ErrorBoundary>
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}> <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}> <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
{renderBody()} <>
{renderBody()}
<BundleContainer fetchComponent={NotificationsContainer}> <BundleContainer fetchComponent={NotificationsContainer}>
{(Component) => <Component />} {(Component) => <Component />}
</BundleContainer> </BundleContainer>
<BundleContainer fetchComponent={ModalContainer}> <BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />} {Component => <Component />}
</BundleContainer> </BundleContainer>
</>
</ScrollContext> </ScrollContext>
</BrowserRouter> </BrowserRouter>
</ErrorBoundary> </ErrorBoundary>

4
app/soapbox/features/ui/util/async-components.ts
View File

@ -494,6 +494,10 @@ export function DatePicker() {
return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker'); return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker');
} }
export function OnboardingWizard() {
return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/onboarding-wizard');
}
export function CompareHistoryModal() { export function CompareHistoryModal() {
return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal'); return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal');
} }