fix: ensures loader disappears after unsuccessful login, adjusts mobile loader styles (#1948)

src/admin/components/elements/Loading/index.tsx

@@ -76,10 +76,11 @@ export const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleT> = ({ name:
 type FormLoadingOverlayToggleT = {
   name: string;
   type?: LoadingOverlayTypes;
+  formIsLoading?: boolean;
   action: 'loading' | 'create' | 'update';
   loadingSuffix?: string;
 }
-export const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleT> = ({ name, action, type = 'withoutNav', loadingSuffix }) => {
+export const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleT> = ({ name, formIsLoading = false, action, type = 'fullscreen', loadingSuffix }) => {
   const isProcessing = useFormProcessing();
   const { t, i18n } = useTranslation('general');
 
@@ -92,7 +93,7 @@ export const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleT> = ({
   return (
     <LoadingOverlayToggle
       name={name}
-      show={action === 'loading' || isProcessing}
+      show={formIsLoading || isProcessing}
       type={type}
       loadingText={`${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim()}
     />

src/admin/components/forms/Form/index.tsx

@@ -31,7 +31,6 @@ const baseClass = 'form';
 const Form: React.FC<Props> = (props) => {
   const {
     disabled,
-    disableNativeFormSubmission = true,
     onSubmit,
     method,
     action,
@@ -160,7 +159,6 @@ const Form: React.FC<Props> = (props) => {
       };
 
       onSubmit(fields, data);
-      if (disableNativeFormSubmission) return;
     }
 
     const formData = contextRef.current.createFormData(overrides);
@@ -301,7 +299,6 @@ const Form: React.FC<Props> = (props) => {
     t,
     i18n,
     waitForAutocomplete,
-    disableNativeFormSubmission,
   ]);
 
   const getFields = useCallback(() => contextRef.current.fields, [contextRef]);

src/admin/components/forms/Form/types.ts

@@ -39,15 +39,8 @@ export type Props = {
   log?: boolean
   validationOperation?: 'create' | 'update'
   children?: React.ReactNode
-} & (
-    {
-      action: string
-      disableNativeFormSubmission?: boolean
-    } | {
-      action?: string
-      disableNativeFormSubmission?: never
-    }
-  )
+  action?: string
+}
 
 export type SubmitOptions = {
   action?: string

src/admin/components/views/Login/index.tsx

@@ -11,7 +11,7 @@ import Password from '../../forms/field-types/Password';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
-import { useLoadingOverlay } from '../../utilities/LoadingOverlay';
+import { FormLoadingOverlayToggle } from '../../elements/Loading';
 
 import './index.scss';
 
@@ -21,7 +21,6 @@ const Login: React.FC = () => {
   const history = useHistory();
   const { t } = useTranslation('authentication');
   const { user, setToken } = useAuth();
-  const { toggleLoadingOverlay } = useLoadingOverlay();
   const config = useConfig();
   const {
     admin: {
@@ -44,10 +43,6 @@ const Login: React.FC = () => {
 
   const onSuccess = (data) => {
     if (data.token) {
-      toggleLoadingOverlay({
-        key: 'login',
-        isLoading: false,
-      });
       setToken(data.token);
       history.push(admin);
     }
@@ -99,17 +94,14 @@ const Login: React.FC = () => {
             <Form
               disableSuccessStatus
               waitForAutocomplete
-              disableNativeFormSubmission={false}
-              onSubmit={() => {
-                toggleLoadingOverlay({
-                  key: 'login',
-                  isLoading: true,
-                });
-              }}
               onSuccess={onSuccess}
               method="post"
               action={`${serverURL}${api}/${userSlug}/login`}
             >
+              <FormLoadingOverlayToggle
+                action="loading"
+                name="login-form"
+              />
               <Email
                 label={t('general:email')}
                 name="email"

src/admin/components/views/collections/Edit/Default.tsx

@@ -93,9 +93,11 @@ const DefaultEditView: React.FC<Props> = (props) => {
             initialState={initialState}
           >
             <FormLoadingOverlayToggle
+              formIsLoading={isLoading}
               action={isLoading ? 'loading' : operation}
               name={`collection-edit--${collection.labels.singular}`}
               loadingSuffix={getTranslation(collection.labels.singular, i18n)}
+              type="withoutNav"
             />
 
             {!isLoading && (

src/admin/scss/app.scss

@@ -34,7 +34,7 @@
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --nav-width: 100%;
+    --nav-width: 0;
   }
 
   @include small-break {
@@ -177,4 +177,4 @@ dialog {
   z-index: var(--z-modal);
 }
 
-@import '~payload-user-css';
+@import '~payload-user-css';