From 84b04250ac6de48efb7d923bb3768d010384b175 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 May 2022 12:20:31 -0500 Subject: [PATCH 1/7] Add LoadingScreen for fullscreen, theme-specific loading --- app/soapbox/components/loading-screen.tsx | 19 +++++++++++++++++++ app/soapbox/containers/soapbox.tsx | 8 ++++---- 2 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 app/soapbox/components/loading-screen.tsx diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx new file mode 100644 index 000000000..84b5bf306 --- /dev/null +++ b/app/soapbox/components/loading-screen.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import LandingGradient from 'soapbox/components/landing-gradient'; +import { Spinner } from 'soapbox/components/ui'; + +/** Fullscreen loading indicator. */ +const LoadingScreen: React.FC = () => { + return ( +
+ + +
+ +
+
+ ); +}; + +export default LoadingScreen; diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index d8ffd97d5..0a86ad0fc 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -14,7 +14,7 @@ import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; import * as BuildConfig from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; -import { Spinner } from 'soapbox/components/ui'; +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'; @@ -126,13 +126,13 @@ const SoapboxMount = () => { if (showLoading) { return ( -
+ <> {themeCss && } - -
+ + ); } From 4cddf0c962ebf706d6e2a1af75f321f1eb23fedb Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 May 2022 12:28:59 -0500 Subject: [PATCH 2/7] SoapboxMount: create showOnboarding variable --- app/soapbox/containers/soapbox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 0a86ad0fc..e377be771 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -80,7 +80,9 @@ const SoapboxMount = () => { const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en'; + const waitlisted = account && !account.source.get('approved', true); const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding); + const showOnboarding = account && !waitlisted && needsOnboarding; const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; const [messages, setMessages] = useState>({}); @@ -136,8 +138,6 @@ const SoapboxMount = () => { ); } - const waitlisted = account && !account.source.get('approved', true); - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', { 'no-reduce-motion': !settings.get('reduceMotion'), 'underline-links': settings.get('underlineLinks'), @@ -145,7 +145,7 @@ const SoapboxMount = () => { 'demetricator': settings.get('demetricator'), }); - if (account && !waitlisted && needsOnboarding) { + if (showOnboarding) { return ( From f72ee6aad0c2899d5c0b15b3caa8e71872f84adc Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 May 2022 12:30:29 -0500 Subject: [PATCH 3/7] SoapboxMount: add comments --- app/soapbox/containers/soapbox.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index e377be771..75767f237 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -67,6 +67,7 @@ const loadInitial = () => { }; }; +/** Highest level node with the Redux store. */ const SoapboxMount = () => { useCachedLocationHandler(); const dispatch = useAppDispatch(); @@ -233,6 +234,7 @@ const SoapboxMount = () => { ); }; +/** The root React node of the application. */ const Soapbox = () => { return ( From 83544470475fc3d5b016e7449d47eac989ced0c0 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 May 2022 12:51:57 -0500 Subject: [PATCH 4/7] SoapboxMount: refactor render to be DRY --- app/soapbox/containers/soapbox.tsx | 179 +++++++++++++++-------------- 1 file changed, 92 insertions(+), 87 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 75767f237..2d89cc9a2 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -127,18 +127,6 @@ const SoapboxMount = () => { localeLoading, ].some(Boolean); - if (showLoading) { - return ( - <> - - {themeCss && } - - - - - ); - } - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', { 'no-reduce-motion': !settings.get('reduceMotion'), 'underline-links': settings.get('underlineLinks'), @@ -146,88 +134,105 @@ const SoapboxMount = () => { 'demetricator': settings.get('demetricator'), }); - if (showOnboarding) { - return ( - - - - - {themeCss && } - - + const helmet = ( + + + + {themeCss && } + + + ); - - - - - - - - ); + /** Render loading screen. */ + const renderLoading = () => ( + <> + {helmet} + + + ); + + /** Render the onboarding flow. */ + const renderOnboarding = () => ( + <> + + + + ); + + /** Render the auth layout or UI. */ + const renderSwitch = () => ( + + + + {/* Redirect signup route depending on Pepe enablement. */} + {/* We should prefer using /signup in components. */} + {pepeEnabled ? ( + + ) : ( + + )} + + {waitlisted && ( + <> + } /> + + + {Component => } + + + )} + + {!me && (singleUserMode + ? + : )} + + {!me && ( + + )} + + + + + + {(features.accountCreation && instance.registrations) && ( + + )} + + {pepeEnabled && ( + + )} + + + + + + + + ); + + /** Render the onboarding flow or UI. */ + const renderBody = () => { + if (showOnboarding) { + return renderOnboarding(); + } else { + return renderSwitch(); + } + }; + + // intl is part of loading. + // It's important nothing in here depends on intl. + if (showLoading) { + return renderLoading(); } return ( - - - - {themeCss && } - - - + {helmet} - <> - - - - - {/* Redirect signup route depending on Pepe enablement. */} - {/* We should prefer using /signup in components. */} - {pepeEnabled ? ( - - ) : ( - - )} - - {waitlisted && ( - <> - } /> - - - {Component => } - - - )} - - {!me && (singleUserMode - ? - : )} - - {!me && ( - - )} - - - - - - {(features.accountCreation && instance.registrations) && ( - - )} - - {pepeEnabled && ( - - )} - - - - - - - - - + + {renderBody()} + From e298115fcf90ed9c0543e46afaebd2d3f18eafe7 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 May 2022 13:00:38 -0500 Subject: [PATCH 5/7] SoapboxMount: async import NotificationsContainer, ModalContainer, remove them elsewhere --- app/soapbox/containers/soapbox.tsx | 21 ++++++++++--------- app/soapbox/features/auth_layout/index.tsx | 6 ------ app/soapbox/features/public_layout/index.tsx | 13 ------------ app/soapbox/features/ui/index.tsx | 10 --------- .../features/verification/waitlist_page.js | 6 ------ 5 files changed, 11 insertions(+), 45 deletions(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 2d89cc9a2..2d339fea5 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -18,8 +18,8 @@ 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 NotificationsContainer from 'soapbox/features/ui/containers/notifications_container'; -import { ModalContainer } from 'soapbox/features/ui/util/async-components'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { ModalContainer, NotificationsContainer } 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'; @@ -31,7 +31,6 @@ import { checkOnboardingStatus } from '../actions/onboarding'; import { preload } from '../actions/preload'; import ErrorBoundary from '../components/error_boundary'; import UI from '../features/ui'; -import BundleContainer from '../features/ui/containers/bundle_container'; import { store } from '../store'; /** Ensure the given locale exists in our codebase */ @@ -173,13 +172,7 @@ const SoapboxMount = () => { )} {waitlisted && ( - <> - } /> - - - {Component => } - - + } /> )} {!me && (singleUserMode @@ -232,6 +225,14 @@ const SoapboxMount = () => { {renderBody()} + + + {(Component) => } + + + + {Component => } + diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx index 1ac59b3de..ca72f4107 100644 --- a/app/soapbox/features/auth_layout/index.tsx +++ b/app/soapbox/features/auth_layout/index.tsx @@ -4,8 +4,6 @@ import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom'; import LandingGradient from 'soapbox/components/landing-gradient'; import SiteLogo from 'soapbox/components/site-logo'; -import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; -import { NotificationsContainer } from 'soapbox/features/ui/util/async-components'; import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks'; import { Button, Card, CardBody } from '../../components/ui'; @@ -86,10 +84,6 @@ const AuthLayout = () => { - - - {(Component) => } - ); }; diff --git a/app/soapbox/features/public_layout/index.tsx b/app/soapbox/features/public_layout/index.tsx index 3fe4834a5..5c7e45107 100644 --- a/app/soapbox/features/public_layout/index.tsx +++ b/app/soapbox/features/public_layout/index.tsx @@ -2,11 +2,6 @@ import React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; import LandingGradient from 'soapbox/components/landing-gradient'; -import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; -import { - NotificationsContainer, - ModalContainer, -} from 'soapbox/features/ui/util/async-components'; import { useAppSelector } from 'soapbox/hooks'; import { isStandalone } from 'soapbox/utils/state'; @@ -42,14 +37,6 @@ const PublicLayout = () => {