Fix Spinners (#4135)

* Replace all return spinner with return null

* Fix loading buttons

* Remove remaning useless spinners

* Remove status and error from AuthProvider as its doing nothing

* Re-add .keep in assets/builds which was removed by accident

app/javascript/App.jsx

 import React, { useEffect } from 'react';
-import { Container, Spinner } from 'react-bootstrap';
+import Container from 'react-bootstrap';
 import { Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +25,7 @@ export default function App() {
   document.documentElement.style.setProperty('--brand-color', brandColor);
   document.documentElement.style.setProperty('--brand-color-light', brandColorLight);
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   return (
     <>

app/javascript/components/admin/manage_users/EditUser.jsx

@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 import AdminNavSideBar from '../AdminNavSideBar';
 import AccountInfo from '../../users/user/AccountInfo';
 import useUser from '../../../hooks/queries/users/useUser';
-import Spinner from '../../shared_components/utilities/Spinner';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function EditUser() {
@@ -23,7 +22,7 @@ export default function EditUser() {
     return <Navigate to="/404" />;
   }
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx

@@ -27,8 +27,8 @@ export default function DeleteUserForm({ user, handleClose }) {
             { t('close') }
           </Button>
           <Button variant="danger" type="submit" disabled={deleteUser.isLoading}>
+            { deleteUser.isLoading && <Spinner className="me-2" /> }
             { t('delete') }
-            { deleteUser.isLoading && <Spinner /> }
           </Button>
         </Stack>
       </Form>

app/javascript/components/admin/manage_users/forms/InviteUserForm.jsx

@@ -24,8 +24,8 @@ export default function InviteUserForm({ handleClose }) {
 
       <Stack className="mt-1" gap={1}>
         <Button variant="brand" className="w-100 mb- mt-1" type="submit" disabled={isSubmitting}>
+          { isSubmitting && <Spinner className="me-2" /> }
           { t('admin.manage_users.send_invitation') }
-          { isSubmitting && <Spinner /> }
         </Button>
       </Stack>
     </Form>

app/javascript/components/admin/manage_users/forms/UserSignupForm.jsx

@@ -28,8 +28,8 @@ export default function UserSignupForm({ handleClose }) {
 
       <Stack className="mt-1" gap={1}>
         <Button variant="brand" className="w-100 mb- mt-1" type="submit" disabled={isSubmitting}>
+          { isSubmitting && <Spinner className="me-2" /> }
           { t('admin.manage_users.create_account') }
-          { isSubmitting && <Spinner /> }
         </Button>
       </Stack>
     </Form>

app/javascript/components/admin/roles/EditRole.jsx

@@ -7,7 +7,6 @@ import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import useRole from '../../../hooks/queries/admin/roles/useRole';
 import EditRoleForm from './forms/EditRoleForm';
-import Spinner from '../../shared_components/utilities/Spinner';
 import AdminNavSideBar from '../AdminNavSideBar';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
 
@@ -15,7 +14,7 @@ export default function EditRole() {
   const { t } = useTranslation();
   const { roleId } = useParams();
   const navigate = useNavigate();
-  const { data: role, isError } = useRole(roleId);
+  const { data: role, isError, isLoading } = useRole(roleId);
   const currentUser = useAuth();
 
   if (currentUser.permissions?.ManageRoles !== 'true') {
@@ -26,6 +25,8 @@ export default function EditRole() {
     return <Navigate to="/admin/roles" replace />;
   }
 
+  if (isLoading) return null;
+
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
@@ -57,7 +58,7 @@ export default function EditRole() {
                   <Row><hr className="w-100 mx-0" /></Row>
                   <Row className="my-2">
                     <Col>
-                      {(!role && <Spinner />) || <EditRoleForm role={role} />}
+                      <EditRoleForm role={role} />
                     </Col>
                   </Row>
                 </Container>

app/javascript/components/admin/roles/RolesList.jsx

@@ -21,6 +21,7 @@ export default function RolesList({ roles, isLoading }) {
           (isLoading && (
             <tr>
               <td>
+                {/* TODO ADD PLACEHOLDER HERE */}
                 <Spinner />
               </td>
             </tr>

app/javascript/components/admin/roles/forms/CreateRoleForm.jsx

@@ -25,8 +25,8 @@ export default function CreateRoleForm({ handleClose }) {
           {t('close')}
         </Button>
         <Button variant="brand" type="submit" disabled={createRole.isLoading}>
+          {createRole.isLoading && <Spinner className="me-2" />}
           {t('admin.roles.create_role')}
-          {createRole.isLoading && <Spinner />}
         </Button>
       </Stack>
     </Form>

app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx

@@ -23,8 +23,8 @@ export default function DeleteRoleForm({ role, handleClose }) {
             { t('close') }
           </Button>
           <Button variant="danger" type="submit" disabled={deleteRoleAPI.isLoading}>
+            {deleteRoleAPI.isLoading && <Spinner className="me-2" />}
             { t('delete') }
-            {deleteRoleAPI.isLoading && <Spinner />}
           </Button>
         </Stack>
       </Form>

app/javascript/components/admin/roles/forms/EditRoleForm.jsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../helpers/forms/EditRoleFormHelpers';
 import Form from '../../../shared_components/forms/Form';
 import FormControl from '../../../shared_components/forms/FormControl';
-import Spinner from '../../../shared_components/utilities/Spinner';
 import useUpdateRole from '../../../../hooks/mutations/admin/roles/useUpdateRole';
 import Modal from '../../../shared_components/modals/Modal';
 import DeleteRoleForm from './DeleteRoleForm';
@@ -59,7 +58,7 @@ export default function EditRoleForm({ role }) {
     );
   }
 
-  if (roomConfigs.isLoading || rolePermissionsIsLoading) return <Spinner />;
+  if (roomConfigs.isLoading || rolePermissionsIsLoading) return null;
   fieldsRoomLimit.value.placeHolder = rolePermissions.RoomLimit;
 
   return (

app/javascript/components/admin/room_configuration/RoomConfig.jsx

@@ -9,7 +9,6 @@ import AdminNavSideBar from '../AdminNavSideBar';
 import RoomConfigRow from './RoomConfigRow';
 import useUpdateRoomConfig from '../../../hooks/mutations/admin/room_configuration/useUpdateRoomConfig';
 import useRoomConfigs from '../../../hooks/queries/rooms/useRoomConfigs';
-import Spinner from '../../shared_components/utilities/Spinner';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function RoomConfig() {
@@ -21,6 +20,8 @@ export default function RoomConfig() {
     return <Navigate to="/404" />;
   }
 
+  if (isLoading) return null;
+
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
@@ -39,11 +40,6 @@ export default function RoomConfig() {
                     <h3> { t('admin.room_configuration.room_configuration') } </h3>
                   </div>
                   <div className="p-4">
-                    {
-                      isLoading
-                        ? <Spinner />
-                        : (
-                          <>
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.allow_room_to_be_recorded')}
                       subtitle={t('admin.room_configuration.configurations.allow_room_to_be_recorded_description')}
@@ -92,9 +88,6 @@ export default function RoomConfig() {
                       mutation={() => useUpdateRoomConfig('glModeratorAccessCode')}
                       value={roomConfigs.glModeratorAccessCode}
                     />
-                          </>
-                        )
-                    }
                   </div>
                 </Container>
               </Tab.Content>

app/javascript/components/admin/site_settings/administration/Administration.jsx

 import React from 'react';
-import { Row, Spinner } from 'react-bootstrap';
+import Row from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import LinksForm from './LinksForm';
 import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
@@ -9,7 +9,7 @@ export default function Administration() {
   const { t } = useTranslation();
   const { isLoading, data: siteSettings } = useSiteSettings(['Terms', 'PrivacyPolicy']);
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   return (
     <>

app/javascript/components/admin/site_settings/administration/LinksForm.jsx

@@ -26,8 +26,8 @@ export default function LinksForm({ id, value, mutation: useUpdateSiteSettingsAP
           type="text"
         />
         <Button id={`${id}-submit-btn`} variant="brand" type="submit" disabled={updateSiteSettingsAPI.isLoading}>
+          {updateSiteSettingsAPI.isLoading && <Spinner className="me-2" />}
           Change URL
-          {updateSiteSettingsAPI.isLoading && <Spinner />}
         </Button>
       </InputGroup>
     </Form>

app/javascript/components/admin/site_settings/appearance/BrandColor.jsx

@@ -3,13 +3,12 @@ import { Stack } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import BrandColorPopover from './BrandColorPopover';
 import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSiteSettings';
-import Spinner from '../../../shared_components/utilities/Spinner';
 
 export default function BrandColor() {
   const { t } = useTranslation();
   const { isLoading, data: colors } = useSiteSettings(['PrimaryColor', 'PrimaryColorLight']);
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   return (
     <div className="mb-3">

app/javascript/components/admin/site_settings/registration/Registration.jsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import useUpdateSiteSetting from '../../../../hooks/mutations/admin/site_settings/useUpdateSiteSetting';
 import RegistrationForm from './forms/RegistrationForm';
 import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSiteSettings';
-import Spinner from '../../../shared_components/utilities/Spinner';
 import SettingsRow from '../SettingsRow';
 import useEnv from '../../../../hooks/queries/env/useEnv';
 import SettingSelect from '../settings/SettingSelect';
@@ -16,7 +15,7 @@ export default function Registration() {
   const { isLoading, data: siteSettings } = useSiteSettings(['RoleMapping', 'DefaultRole', 'ResyncOnLogin', 'RegistrationMethod']);
   const { data: roles } = useRoles();
 
-  if (isLoading || isLoadingEnv) return <Spinner />;
+  if (isLoading || isLoadingEnv) return null;
 
   return (
     <>

app/javascript/components/admin/site_settings/registration/forms/RegistrationForm.jsx

@@ -28,8 +28,8 @@ export default function RegistrationForm({ value, mutation: useUpdateSiteSetting
           type="text"
         />
         <Button id="RegistrationForm-submit-btn" variant="brand" type="submit" disabled={updateSiteSettingsAPI.isLoading}>
+          {updateSiteSettingsAPI.isLoading && <Spinner className="me-2" />}
           { t('update') }
-          {updateSiteSettingsAPI.isLoading && <Spinner />}
         </Button>
       </InputGroup>
     </Form>

app/javascript/components/admin/site_settings/settings/Settings.jsx

 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSiteSettings';
-import Spinner from '../../../shared_components/utilities/Spinner';
 import SettingsRow from '../SettingsRow';
 
 export default function Settings() {
   const { t } = useTranslation();
   const { isLoading, data: siteSettings } = useSiteSettings(['ShareRooms', 'PreuploadPresentation']);
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   return (
     <>

app/javascript/components/home/HomePage.jsx

@@ -4,7 +4,6 @@ import { useLocation, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Button from 'react-bootstrap/Button';
 import ButtonLink from '../shared_components/utilities/ButtonLink';
-import Spinner from '../shared_components/utilities/Spinner';
 import useEnv from '../../hooks/queries/env/useEnv';
 import Logo from '../shared_components/Logo';
 import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
@@ -22,7 +21,7 @@ export default function HomePage() {
     document.cookie = `token=${inviteToken};path=/;`;
   }, [inviteToken]);
 
-  if (isLoading) return <Spinner />;
+  if (isLoading) return null;
 
   function showSignUp() {
     return registrationMethod !== 'invite' || !!inviteToken;

app/javascript/components/recordings/RecordingsList.jsx

@@ -25,6 +25,7 @@ export default function RecordingsList({
       </thead>
       <tbody className="border-top-0">
         {[...Array(recordingsProcessing)].map(() => <ProcessingRecordingRow />)}
+        {/* TODO ADD PLACEHOLDER HERE */}
         {(isLoading && <tr><td colSpan="6"><Spinner /></td></tr>) || (recordings?.length
           ? (
             recordings?.map((recording) => <RecordingRow key={recording.id} recording={recording} />)

app/javascript/components/recordings/forms/DeleteRecordingForm.jsx

@@ -22,8 +22,8 @@ export default function DeleteRecordingForm({ mutation: useDeleteAPI, recordId,
             { t('close') }
           </Button>
           <Button variant="danger" type="submit" disabled={deleteAPI.isLoading}>
+            {deleteAPI.isLoading && <Spinner className="me-2" />}
             { t('delete') }
-            {deleteAPI.isLoading && <Spinner />}
           </Button>
         </Stack>
       </Form>