StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show proper spinners

Browse source
This commit is contained in:
Dane Everitt 2019-12-22 14:53:27 -08:00
parent 5a31771b4b
commit 446d5be62b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 31 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

3
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View file

@ -7,6 +7,7 @@ import { Actions, useStoreActions } from 'easy-peasy';
import { StaticContext } from 'react-router';
import FlashMessageRender from '@/components/FlashMessageRender';
import { ApplicationStore } from '@/state';
import Spinner from '@/components/elements/Spinner';
export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
const [ code, setCode ] = useState('');
@ -71,7 +72,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
disabled={isLoading || code.length !== 6}
>
{isLoading ?
<span className={'spinner white'}>&nbsp;</span>
<Spinner size={'tiny'} className={'mx-auto'}/>
:
'Continue'
}

3
resources/scripts/components/auth/LoginContainer.tsx
View file

@ -11,6 +11,7 @@ import Field from '@/components/elements/Field';
import { httpErrorToHuman } from '@/api/http';
import { FlashMessage } from '@/state/flashes';
import ReCAPTCHA from 'react-google-recaptcha';
import Spinner from '@/components/elements/Spinner';
type OwnProps = RouteComponentProps & {
clearFlashes: ActionCreator<void>;
@ -63,7 +64,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
className={'btn btn-primary btn-jumbo'}
>
{isSubmitting ?
<span className={'spinner white'}>&nbsp;</span>
<Spinner size={'tiny'} className={'mx-auto'}/>
:
'Login'
}

3
resources/scripts/components/auth/ResetPasswordContainer.tsx
View file

@ -8,6 +8,7 @@ import LoginFormContainer from '@/components/auth/LoginFormContainer';
import FlashMessageRender from '@/components/FlashMessageRender';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import Spinner from '@/components/elements/Spinner';
type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
@ -89,7 +90,7 @@ export default (props: Props) => {
disabled={isLoading || !canSubmit()}
>
{isLoading ?
<span className={'spinner white'}>&nbsp;</span>
<Spinner size={'tiny'} className={'mx-auto'}/>
:
'Reset Password'
}

30
resources/scripts/components/elements/Spinner.tsx
View file

@ -3,17 +3,27 @@ import classNames from 'classnames';
export type SpinnerSize = 'large' | 'normal' | 'tiny';
export default ({ size, centered }: { size?: SpinnerSize; centered?: boolean }) => (
interface Props {
size?: SpinnerSize;
centered?: boolean;
className?: string;
}
export default ({ size, centered, className }: Props) => (
centered ?
<div className={classNames('flex justify-center', { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
<div className={classNames('spinner-circle spinner-white', {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}/>
<div className={classNames(`flex justify-center ${className}`, { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
<div
className={classNames('spinner-circle spinner-white', {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}
/>
</div>
:
<div className={classNames('spinner-circle spinner-white', {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}/>
<div
className={classNames(`spinner-circle spinner-white ${className}`, {
'spinner-lg': size === 'large',
'spinner-sm': size === 'tiny',
})}
/>
);