diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index 690a03a5f..ba59cef92 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -24,6 +24,7 @@ import WaitlistPage from 'soapbox/features/verification/waitlist_page'; import { createGlobals } from 'soapbox/globals'; import messages from 'soapbox/locales/messages'; import { makeGetAccount } from 'soapbox/selectors'; +import { getFeatures } from 'soapbox/utils/features'; import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; import { generateThemeCss } from 'soapbox/utils/theme'; @@ -36,30 +37,31 @@ import { store } from '../store'; const validLocale = locale => Object.keys(messages).includes(locale); -// Delay rendering until instance has loaded or failed (for feature detection) -const isInstanceLoaded = state => { - const v = state.getIn(['instance', 'version'], '0.0.0'); - const fetchFailed = state.getIn(['meta', 'instance_fetch_failed'], false); - - return v !== '0.0.0' || fetchFailed; -}; - // Configure global functions for developers createGlobals(store); +// Preload happens synchronously store.dispatch(preload()); -store.dispatch(fetchMe()) - .then(account => { - // Postpone for authenticated fetch - store.dispatch(loadInstance()); - store.dispatch(loadSoapboxConfig()); +/** Load initial data from the backend */ +const loadInitial = () => { + return async(dispatch, getState) => { + // Await for authenticated fetch + await dispatch(fetchMe()); - if (!account) { - store.dispatch(fetchVerificationConfig()); + await Promise.all([ + dispatch(loadInstance()), + dispatch(loadSoapboxConfig()), + ]); + + const state = getState(); + const features = getFeatures(state.instance); + + if (features.pepe && !state.me) { + await dispatch(fetchVerificationConfig()); } - }) - .catch(console.error); + }; +}; const makeAccount = makeGetAccount(); @@ -77,7 +79,6 @@ const mapStateToProps = (state) => { showIntroduction, me, account, - instanceLoaded: isInstanceLoaded(state), reduceMotion: settings.get('reduceMotion'), underlineLinks: settings.get('underlineLinks'), systemFont: settings.get('systemFont'), @@ -99,7 +100,6 @@ class SoapboxMount extends React.PureComponent { showIntroduction: PropTypes.bool, me: SoapboxPropTypes.me, account: ImmutablePropTypes.record, - instanceLoaded: PropTypes.bool, reduceMotion: PropTypes.bool, underlineLinks: PropTypes.bool, systemFont: PropTypes.bool, @@ -117,6 +117,7 @@ class SoapboxMount extends React.PureComponent { state = { messages: {}, localeLoading: true, + isLoaded: false, } setMessages = () => { @@ -133,6 +134,12 @@ class SoapboxMount extends React.PureComponent { componentDidMount() { this.setMessages(); + + this.props.dispatch(loadInitial()).then(() => { + this.setState({ isLoaded: true }); + }).catch(() => { + this.setState({ isLoaded: false }); + }); } componentDidUpdate(prevProps) { @@ -144,21 +151,14 @@ class SoapboxMount extends React.PureComponent { } render() { - const { me, account, instanceLoaded, themeCss, locale, singleUserMode } = this.props; + const { me, account, themeCss, locale, singleUserMode } = this.props; if (me === null) return null; if (me && !account) return null; - if (!instanceLoaded) return null; + if (!this.state.isLoaded) return null; if (this.state.localeLoading) return null; const waitlisted = account && !account.getIn(['source', 'approved'], true); - // Disabling introduction for launch - // const { showIntroduction } = this.props; - // - // if (showIntroduction) { - // return ; - // } - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { 'no-reduce-motion': !this.props.reduceMotion, 'underline-links': this.props.underlineLinks,