bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SoapboxMount: display a spinner while API requests are loading

Browse source
This commit is contained in:
Alex Gleason 2022-05-18 14:38:49 -05:00
parent b3d2306aaf
commit 93187c8eed
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/ui/spinner/spinner.css
View file

Binary file not shown.

6
app/soapbox/components/ui/spinner/spinner.tsx
View file

@ -6,7 +6,7 @@ import Text from '../text/text';
import './spinner.css';
interface ILoadingIndicator {
interface ISpinner {
/** Width and height of the spinner in pixels. */
size?: number,
/** Whether to display "Loading..." beneath the spinner. */
@ -14,7 +14,7 @@ interface ILoadingIndicator {
}
/** Spinning loading placeholder. */
const LoadingIndicator = ({ size = 30, withText = true }: ILoadingIndicator) => (
const Spinner = ({ size = 30, withText = true }: ISpinner) => (
<Stack space={2} justifyContent='center' alignItems='center'>
<div className='spinner' style={{ width: size, height: size }}>
{Array.from(Array(12).keys()).map(i => (
@ -30,4 +30,4 @@ const LoadingIndicator = ({ size = 30, withText = true }: ILoadingIndicator) =>
</Stack>
);
export default LoadingIndicator;
export default Spinner;

24
app/soapbox/containers/soapbox.tsx
View file

@ -14,6 +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 AuthLayout from 'soapbox/features/auth_layout';
import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
import PublicLayout from 'soapbox/features/public_layout';
@ -115,10 +116,25 @@ const SoapboxMount = () => {
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
};
if (me === null) return null;
if (me && !account) return null;
if (!isLoaded) return null;
if (localeLoading) return null;
/** Whether to display a loading indicator. */
const showLoading = [
me === null,
me && !account,
!isLoaded,
localeLoading,
].some(Boolean);
if (showLoading) {
return (
<div className='p-4 h-screen w-screen flex items-center justify-center'>
<Helmet>
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
</Helmet>
<Spinner size={40} withText={false} />
</div>
);
}
const waitlisted = account && !account.source.get('approved', true);