Remove return null on isLoading (#4138)

* Remove almost all return null on isLoading

* Add necessary isLoading

* Add isLoading back to RoomJoin

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

@@ -14,7 +14,7 @@ import { useAuth } from '../../../contexts/auth/AuthProvider';
 export default function EditUser() {
   const { t } = useTranslation();
   const { userId } = useParams();
-  const { isLoading, data: user } = useUser(userId);
+  const { data: user } = useUser(userId);
   const navigate = useNavigate();
   const currentUser = useAuth();
 
@@ -22,8 +22,6 @@ export default function EditUser() {
     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>

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

@@ -14,7 +14,7 @@ export default function EditRole() {
   const { t } = useTranslation();
   const { roleId } = useParams();
   const navigate = useNavigate();
-  const { data: role, isError, isLoading } = useRole(roleId);
+  const { data: role, isError } = useRole(roleId);
   const currentUser = useAuth();
 
   if (currentUser.permissions?.ManageRoles !== 'true') {
@@ -25,8 +25,6 @@ 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>

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

@@ -27,7 +27,7 @@ export default function EditRoleForm({ role }) {
   const fieldsRoleName = editRoleFormFieldsRoleName;
   const fieldsRoomLimit = editRoleFormFieldsRoomLimit;
   const roomConfigs = useRoomConfigs();
-  const { data: rolePermissions, isLoading: rolePermissionsIsLoading } = useRolePermissions(role.id);
+  const { data: rolePermissions } = useRolePermissions(role.id);
   const currentUser = useAuth();
   const editRoleFormConfigRoomLimit = {
     mode: 'onBlur',
@@ -58,7 +58,6 @@ export default function EditRoleForm({ role }) {
     );
   }
 
-  if (roomConfigs.isLoading || rolePermissionsIsLoading) return null;
   fieldsRoomLimit.value.placeHolder = rolePermissions.RoomLimit;
 
   return (
@@ -73,14 +72,14 @@ export default function EditRoleForm({ role }) {
             permissionName="CreateRoom"
             description="Can create rooms"
             roleId={role.id}
-            defaultValue={rolePermissions.CreateRoom === 'true'}
+            defaultValue={rolePermissions?.CreateRoom === 'true'}
             updateMutation={updateRolePermission}
           />
           <RolePermissionRow
             permissionName="ManageUsers"
             description="Allow users with this role to manage users"
             roleId={role.id}
-            defaultValue={rolePermissions.ManageUsers === 'true'}
+            defaultValue={rolePermissions?.ManageUsers === 'true'}
             updateMutation={updateRolePermission}
           />
           {(roomConfigs.data.record === 'optional') && (
@@ -88,7 +87,7 @@ export default function EditRoleForm({ role }) {
               permissionName="CanRecord"
               description="Allow users with this role to record their meetings"
               roleId={role.id}
-              defaultValue={rolePermissions.CanRecord === 'true'}
+              defaultValue={rolePermissions?.CanRecord === 'true'}
               updateMutation={updateRolePermission}
             />
           )}
@@ -96,21 +95,21 @@ export default function EditRoleForm({ role }) {
             permissionName="ManageRooms"
             description="Allow users with this role to manage server rooms"
             roleId={role.id}
-            defaultValue={rolePermissions.ManageRooms === 'true'}
+            defaultValue={rolePermissions?.ManageRooms === 'true'}
             updateMutation={updateRolePermission}
           />
           <RolePermissionRow
             permissionName="ManageRecordings"
             description="Allow users with this role to manage server recordings"
             roleId={role.id}
-            defaultValue={rolePermissions.ManageRecordings === 'true'}
+            defaultValue={rolePermissions?.ManageRecordings === 'true'}
             updateMutation={updateRolePermission}
           />
           <RolePermissionRow
             permissionName="ManageSiteSettings"
             description="Allow users with this role to manage site settings"
             roleId={role.id}
-            defaultValue={rolePermissions.ManageSiteSettings === 'true'}
+            defaultValue={rolePermissions?.ManageSiteSettings === 'true'}
             updateMutation={updateRolePermission}
           />
           {/* Don't show ManageRoles if current_user is editing their own role */}
@@ -119,7 +118,7 @@ export default function EditRoleForm({ role }) {
             permissionName="ManageRoles"
             description="Allow users with this role to edit other roles"
             roleId={role.id}
-            defaultValue={rolePermissions.ManageRoles === 'true'}
+            defaultValue={rolePermissions?.ManageRoles === 'true'}
             updateMutation={updateRolePermission}
           />
           )}
@@ -127,7 +126,7 @@ export default function EditRoleForm({ role }) {
             permissionName="SharedList"
             description="Include users with this role in the dropdown for sharing rooms"
             roleId={role.id}
-            defaultValue={rolePermissions.SharedList === 'true'}
+            defaultValue={rolePermissions?.SharedList === 'true'}
             updateMutation={updateRolePermission}
           />
 

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

@@ -13,15 +13,13 @@ import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function RoomConfig() {
   const { t } = useTranslation();
-  const { data: roomConfigs, isLoading } = useRoomConfigs();
+  const { data: roomConfigs } = useRoomConfigs();
   const currentUser = useAuth();
 
   if (currentUser.permissions?.ManageSiteSettings !== 'true') {
     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>
@@ -44,49 +42,49 @@ export default function RoomConfig() {
                       title={t('admin.room_configuration.configurations.allow_room_to_be_recorded')}
                       subtitle={t('admin.room_configuration.configurations.allow_room_to_be_recorded_description')}
                       mutation={() => useUpdateRoomConfig('record')}
-                      value={roomConfigs.record}
+                      value={roomConfigs?.record}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.require_user_signed_in')}
                       subtitle={t('admin.room_configuration.configurations.require_user_signed_in_description')}
                       mutation={() => useUpdateRoomConfig('glRequireAuthentication')}
-                      value={roomConfigs.glRequireAuthentication}
+                      value={roomConfigs?.glRequireAuthentication}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.require_mod_approval')}
                       subtitle={t('admin.room_configuration.configurations.require_mod_approval_description')}
                       mutation={() => useUpdateRoomConfig('guestPolicy')}
-                      value={roomConfigs.guestPolicy}
+                      value={roomConfigs?.guestPolicy}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting')}
                       subtitle={t('admin.room_configuration.configurations.allow_any_user_to_start_meeting_description')}
                       mutation={() => useUpdateRoomConfig('glAnyoneCanStart')}
-                      value={roomConfigs.glAnyoneCanStart}
+                      value={roomConfigs?.glAnyoneCanStart}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.allow_users_to_join_as_mods')}
                       subtitle={t('admin.room_configuration.configurations.allow_users_to_join_as_mods_description')}
                       mutation={() => useUpdateRoomConfig('glAnyoneJoinAsModerator')}
-                      value={roomConfigs.glAnyoneJoinAsModerator}
+                      value={roomConfigs?.glAnyoneJoinAsModerator}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.mute_users_on_join')}
                       subtitle={t('admin.room_configuration.configurations.mute_users_on_join_description')}
                       mutation={() => useUpdateRoomConfig('muteOnStart')}
-                      value={roomConfigs.muteOnStart}
+                      value={roomConfigs?.muteOnStart}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.viewer_access_code')}
                       subtitle={t('admin.room_configuration.configurations.viewer_access_code_description')}
                       mutation={() => useUpdateRoomConfig('glViewerAccessCode')}
-                      value={roomConfigs.glViewerAccessCode}
+                      value={roomConfigs?.glViewerAccessCode}
                     />
                     <RoomConfigRow
                       title={t('admin.room_configuration.configurations.mod_access_code')}
                       subtitle={t('admin.room_configuration.configurations.mod_access_code_description')}
                       mutation={() => useUpdateRoomConfig('glModeratorAccessCode')}
-                      value={roomConfigs.glModeratorAccessCode}
+                      value={roomConfigs?.glModeratorAccessCode}
                     />
                   </div>
                 </Container>

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

@@ -7,9 +7,7 @@ import useSiteSettings from '../../../../hooks/queries/admin/site_settings/useSi
 
 export default function Administration() {
   const { t } = useTranslation();
-  const { isLoading, data: siteSettings } = useSiteSettings(['Terms', 'PrivacyPolicy']);
-
-  if (isLoading) return null;
+  const { data: siteSettings } = useSiteSettings(['Terms', 'PrivacyPolicy']);
 
   return (
     <>
@@ -19,7 +17,7 @@ export default function Administration() {
         <LinksForm
           id="termsForm"
           mutation={() => useUpdateSiteSetting('Terms')}
-          value={siteSettings.Terms}
+          value={siteSettings?.Terms}
         />
       </Row>
       <Row>
@@ -28,7 +26,7 @@ export default function Administration() {
         <LinksForm
           id="privacyForm"
           mutation={() => useUpdateSiteSetting('PrivacyPolicy')}
-          value={siteSettings.PrivacyPolicy}
+          value={siteSettings?.PrivacyPolicy}
         />
       </Row>
     </>

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

@@ -11,12 +11,10 @@ import useRoles from '../../../../hooks/queries/admin/roles/useRoles';
 
 export default function Registration() {
   const { t } = useTranslation();
-  const { isLoadingEnv, data: env } = useEnv();
-  const { isLoading, data: siteSettings } = useSiteSettings(['RoleMapping', 'DefaultRole', 'ResyncOnLogin', 'RegistrationMethod']);
+  const { data: env } = useEnv();
+  const { data: siteSettings } = useSiteSettings(['RoleMapping', 'DefaultRole', 'ResyncOnLogin', 'RegistrationMethod']);
   const { data: roles } = useRoles();
 
-  if (isLoading || isLoadingEnv) return null;
-
   return (
     <>
       {/* TODO - ahmad: complete this
@@ -32,7 +30,7 @@ export default function Registration() {
       </SettingSelect>
       */}
 
-      { env.OPENID_CONNECT && (
+      { env?.OPENID_CONNECT && (
         <Row className="mb-3">
           <SettingsRow
             name="ResyncOnLogin"
@@ -42,14 +40,14 @@ export default function Registration() {
                 { t('admin.site_settings.registration.resync_on_login_description') }
               </p>
             )}
-            value={siteSettings.ResyncOnLogin}
+            value={siteSettings?.ResyncOnLogin}
           />
         </Row>
       )}
 
       <SettingSelect
         settingName="DefaultRole"
-        defaultValue={siteSettings.DefaultRole}
+        defaultValue={siteSettings?.DefaultRole}
         title={t('admin.site_settings.registration.default_role')}
         description={t('admin.site_settings.registration.default_role_description')}
       >
@@ -61,7 +59,7 @@ export default function Registration() {
         <p className="text-muted"> { t('admin.site_settings.registration.role_mapping_by_email_description') } </p>
         <RegistrationForm
           mutation={() => useUpdateSiteSetting('RoleMapping')}
-          value={siteSettings.RoleMapping}
+          value={siteSettings?.RoleMapping}
         />
       </Row>
     </>

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

@@ -5,9 +5,7 @@ import SettingsRow from '../SettingsRow';
 
 export default function Settings() {
   const { t } = useTranslation();
-  const { isLoading, data: siteSettings } = useSiteSettings(['ShareRooms', 'PreuploadPresentation']);
-
-  if (isLoading) return null;
+  const { data: siteSettings } = useSiteSettings(['ShareRooms', 'PreuploadPresentation']);
 
   return (
     <>
@@ -19,7 +17,7 @@ export default function Settings() {
             { t('admin.site_settings.settings.allow_users_to_share_rooms_description') }
           </p>
       )}
-        value={siteSettings.ShareRooms}
+        value={siteSettings?.ShareRooms}
       />
       <SettingsRow
         name="PreuploadPresentation"
@@ -29,7 +27,7 @@ export default function Settings() {
             {t('admin.site_settings.settings.allow_users_to_preupload_presentation_description')}
           </p>
       )}
-        value={siteSettings.PreuploadPresentation}
+        value={siteSettings?.PreuploadPresentation}
       />
     </>
   );

app/javascript/components/home/HomePage.jsx

@@ -9,9 +9,8 @@ import Logo from '../shared_components/Logo';
 import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 
 export default function HomePage() {
-  const { isLoading, data: env } = useEnv();
+  const { data: env } = useEnv();
   const { t } = useTranslation();
-
   const { search } = useLocation();
   const [searchParams] = useSearchParams();
   const inviteToken = searchParams.get('inviteToken');
@@ -21,8 +20,6 @@ export default function HomePage() {
     document.cookie = `token=${inviteToken};path=/;`;
   }, [inviteToken]);
 
-  if (isLoading) return null;
-
   function showSignUp() {
     return registrationMethod !== 'invite' || !!inviteToken;
   }
@@ -40,7 +37,7 @@ export default function HomePage() {
         </span>
         <div className="mx-auto mb-2">
           {
-            env.OPENID_CONNECT ? (
+            env?.OPENID_CONNECT ? (
               <Form action="/auth/openid_connect" method="POST" data-turbo="false">
                 <input type="hidden" name="authenticity_token" value={document.querySelector('meta[name="csrf-token"]').content} />
                 <Button variant="brand-outline-color" className="btn btn-xlg m-2" type="submit">{t('authentication.sign_up')}</Button>

app/javascript/components/rooms/Rooms.jsx

@@ -8,9 +8,7 @@ import RecordingsCountTab from '../recordings/RecordingsCountTab';
 import useRecordingsCount from '../../hooks/queries/recordings/useRecordingsCount';
 
 export default function Rooms() {
-  const { isLoading, data: recordingsCount } = useRecordingsCount();
-
-  if (isLoading) return null;
+  const { data: recordingsCount } = useRecordingsCount();
 
   return (
     <div className="pt-5 wide-background-rooms">

app/javascript/components/rooms/room/Room.jsx

@@ -21,11 +21,9 @@ function copyInvite() {
 export default function Room() {
   const { t } = useTranslation();
   const { friendlyId } = useParams();
-  const { isLoading, data: room } = useRoom(friendlyId);
+  const { data: room } = useRoom(friendlyId);
   const startMeeting = useStartMeeting(friendlyId);
 
-  if (isLoading) return null;
-
   return (
     <div className="wide-background-room">
       <Row className="pt-4">
@@ -39,14 +37,14 @@ export default function Room() {
         <Col className="col-xxl-8">
           <Stack className="room-header-wrapper">
             <Stack direction="horizontal" gap={2}>
-              <h1>{room.name}</h1>
+              <h1>{room?.name}</h1>
               <Stack direction="horizontal" className="mb-1">
                 { room?.online
                   && <MeetingBadges count={room?.participants} />}
                 { room?.shared && <SharedBadge ownerName={room?.owner_name} /> }
               </Stack>
             </Stack>
-            { room.last_session ? (
+            { room?.last_session ? (
               <span className="text-muted"> { t('room.last_session', { room }) }  </span>
             ) : (
               <span className="text-muted"> { t('room.no_last_session') } </span>
@@ -56,7 +54,7 @@ export default function Room() {
         <Col>
           <Button variant="brand" className="mt-1 mx-2 float-end" onClick={startMeeting.mutate} disabled={startMeeting.isLoading}>
             {startMeeting.isLoading && <Spinner className="me-2" />}
-            { room.online ? (
+            { room?.online ? (
               t('room.meeting.join_meeting')
             ) : (
               t('room.meeting.start_meeting')

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -33,7 +33,7 @@ export default function RoomJoin() {
   const publicRoom = usePublicRoom(friendlyId);
   const roomStatusAPI = useRoomStatus(friendlyId);
 
-  const { isLoading, data: env } = useEnv();
+  const { data: env } = useEnv();
 
   const methods = useForm(joinFormConfig);
 
@@ -139,8 +139,6 @@ export default function RoomJoin() {
     </Stack>
   );
 
-  if (isLoading) return null;
-
   return (
     <div className="vertical-buffer">
       <div className="text-center pb-4">

app/javascript/components/rooms/room/room_settings/RoomSettings.jsx

@@ -24,8 +24,6 @@ export default function RoomSettings() {
   const updateMutationWrapper = () => useUpdateRoomSetting(friendlyId);
   const deleteMutationWrapper = (args) => useDeleteRoom({ friendlyId, ...args });
 
-  if (roomSetting.isLoading || roomsConfigs.isLoading) return null;
-
   return (
     <div id="room-settings">
       <Card className="mx-auto mt-3 p-4 border-0 shadow-sm">
@@ -36,62 +34,62 @@ export default function RoomSettings() {
               <AccessCodeRow
                 settingName="glViewerAccessCode"
                 updateMutation={updateMutationWrapper}
-                code={roomSetting.data.glViewerAccessCode}
-                config={roomsConfigs.data.glViewerAccessCode}
+                code={roomSetting?.data?.glViewerAccessCode}
+                config={roomsConfigs?.data?.glViewerAccessCode}
                 description={t('room.settings.generate_viewers_access_code')}
               />
               <AccessCodeRow
                 settingName="glModeratorAccessCode"
                 updateMutation={updateMutationWrapper}
-                code={roomSetting.data.glModeratorAccessCode}
-                config={roomsConfigs.data.glModeratorAccessCode}
+                code={roomSetting?.data?.glModeratorAccessCode}
+                config={roomsConfigs?.data?.glModeratorAccessCode}
                 description={t('room.settings.generate_mods_access_code')}
               />
             </Col>
             <Col className="ps-4">
               <Row> <h6 className="text-brand">{ t('room.settings.user_settings') }</h6> </Row>
-              {(currentUser.permissions.CanRecord === 'true') && (
+              {(currentUser?.permissions?.CanRecord === 'true') && (
                 <RoomSettingsRow
                   settingName="record"
                   updateMutation={updateMutationWrapper}
-                  value={roomSetting.data.record}
-                  config={roomsConfigs.data.record}
+                  value={roomSetting?.data?.record}
+                  config={roomsConfigs?.data?.record}
                   description={t('room.settings.allow_room_to_be_recorded')}
                 />
               )}
               <RoomSettingsRow
                 settingName="glRequireAuthentication"
                 updateMutation={updateMutationWrapper}
-                value={roomSetting.data.glRequireAuthentication}
-                config={roomsConfigs.data.glRequireAuthentication}
+                value={roomSetting?.data?.glRequireAuthentication}
+                config={roomsConfigs?.data?.glRequireAuthentication}
                 description={t('room.settings.require_signed_in')}
               />
               <RoomSettingsRow
                 settingName="guestPolicy"
                 updateMutation={updateMutationWrapper}
-                value={roomSetting.data.guestPolicy}
-                config={roomsConfigs.data.guestPolicy}
+                value={roomSetting?.data?.guestPolicy}
+                config={roomsConfigs?.data?.guestPolicy}
                 description={t('room.settings.require_mod_approval')}
               />
               <RoomSettingsRow
                 settingName="glAnyoneCanStart"
                 updateMutation={updateMutationWrapper}
-                value={roomSetting.data.glAnyoneCanStart}
-                config={roomsConfigs.data.glAnyoneCanStart}
+                value={roomSetting?.data?.glAnyoneCanStart}
+                config={roomsConfigs?.data?.glAnyoneCanStart}
                 description={t('room.settings.allow_any_user_to_start')}
               />
               <RoomSettingsRow
                 settingName="glAnyoneJoinAsModerator"
                 updateMutation={updateMutationWrapper}
-                value={roomSetting.data.glAnyoneJoinAsModerator}
-                config={roomsConfigs.data.glAnyoneJoinAsModerator}
+                value={roomSetting?.data?.glAnyoneJoinAsModerator}
+                config={roomsConfigs?.data?.glAnyoneJoinAsModerator}
                 description={t('room.settings.all_users_join_as_mods')}
               />
               <RoomSettingsRow
                 settingName="muteOnStart"
                 updateMutation={updateMutationWrapper}
-                value={roomSetting.data.muteOnStart}
-                config={roomsConfigs.data.muteOnStart}
+                value={roomSetting?.data?.muteOnStart}
+                config={roomsConfigs?.data?.muteOnStart}
                 description={t('room.settings.mute_users_on_join')}
               />
               <div className="float-end mt-3">

app/javascript/components/rooms/room/shared_access/SharedAccessList.jsx

@@ -12,14 +12,12 @@ import Avatar from '../../../users/user/Avatar';
 import useDeleteSharedAccess from '../../../../hooks/mutations/shared_accesses/useDeleteSharedAccess';
 import SearchBar from '../../../shared_components/search/SearchBar';
 
-export default function SharedAccessList({ users, isLoading }) {
+export default function SharedAccessList({ users }) {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState('');
   const { friendlyId } = useParams();
   const { handleDeleteSharedAccess } = useDeleteSharedAccess(friendlyId);
 
-  if (isLoading) return null;
-
   return (
     <div id="shared-access-list">
       <Stack direction="horizontal" className="w-100 mt-5">
@@ -88,5 +86,4 @@ SharedAccessList.propTypes = {
     avatar: PropTypes.string.isRequired,
     filter: PropTypes.func,
   })).isRequired,
-  isLoading: PropTypes.bool.isRequired,
 };

app/javascript/components/shared_components/Footer.jsx

@@ -5,16 +5,14 @@ import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 
 export default function Footer() {
   const { t } = useTranslation();
-  const { isLoading, data: env } = useEnv();
+  const { data: env } = useEnv();
   const { data: terms } = useSiteSetting('Terms');
   const { data: privacyPolicy } = useSiteSetting('PrivacyPolicy');
 
-  if (isLoading) return null;
-
   return (
     <footer id="footer" className="footer background-whitesmoke text-center pb-2">
       <a href="https://docs.bigbluebutton.org/greenlight_v3/gl3-install.html" target="_blank" rel="noreferrer">Greenlight</a>
-      <span className="text-muted"> {env.VERSION_TAG} </span>
+      <span className="text-muted"> {env?.VERSION_TAG} </span>
       { terms
         && (
           <a className="ps-3" href={terms} target="_blank" rel="noreferrer">{ t('admin.site_settings.administration.terms') }</a>

app/javascript/components/users/authentication/forms/SigninForm.jsx

@@ -24,11 +24,9 @@ export default function SigninForm() {
   const createSession = useCreateSession(token);
   const { isSubmitting } = methods.formState;
   const fields = signinFormFields;
-  const { isLoading, data: env } = useEnv();
+  const { data: env } = useEnv();
   const captchaRef = useRef(null);
 
-  if (isLoading) return null;
-
   const onError = () => {
     toast.error(t('toast.error.problem_completing_action'));
   };
@@ -61,11 +59,11 @@ export default function SigninForm() {
           <Link to="/forget_password" className="text-link float-end small"> { t('authentication.forgot_password') } </Link>
         </Col>
       </Row>
-      { env.HCAPTCHA_KEY
+      { env?.HCAPTCHA_KEY
         && (
         <Container className="d-flex justify-content-center mt-3">
           <HCaptcha
-            sitekey={env.HCAPTCHA_KEY}
+            sitekey={env?.HCAPTCHA_KEY}
             size="invisible"
             onVerify={(response) => setToken(response)}
             onError={onError}

app/javascript/components/users/authentication/forms/SignupForm.jsx

@@ -18,11 +18,9 @@ export default function SignupForm() {
   const { onSubmit: createUser } = useCreateUser(token);
   const { isSubmitting } = methods.formState;
   const fields = signupFormFields;
-  const { isLoading, data: env } = useEnv();
+  const { data: env } = useEnv();
   const captchaRef = useRef(null);
 
-  if (isLoading) return null;
-
   const onError = () => {
     toast.error(t('toast.error.problem_completing_action'));
   };
@@ -43,11 +41,11 @@ export default function SignupForm() {
       <FormControl field={fields.email} type="email" />
       <FormControl field={fields.password} type="password" />
       <FormControl field={fields.password_confirmation} type="password" />
-      { env.HCAPTCHA_KEY
+      { env?.HCAPTCHA_KEY
         && (
         <Container className="d-flex justify-content-center mt-3">
           <HCaptcha
-            sitekey={env.HCAPTCHA_KEY}
+            sitekey={env?.HCAPTCHA_KEY}
             size="invisible"
             onVerify={(response) => setToken(response)}
             onError={onError}

app/javascript/components/users/user/forms/UpdateUserForm.jsx

@@ -42,9 +42,7 @@ export default function UpdateUserForm({ user }) {
   const currentUser = useAuth();
 
   const isAdmin = currentUser.permissions.ManageUsers === 'true';
-  const { data: roles, isLoading } = useRoles('', isAdmin);
-
-  if (isLoading) return null;
+  const { data: roles } = useRoles('', isAdmin);
 
   return (
     <Form methods={methods} onSubmit={updateUser.mutate}>
@@ -58,7 +56,7 @@ export default function UpdateUserForm({ user }) {
       {isAdmin && (
         <FormControl field={fields.role_id} control={BootStrapForm.Select}>
           {
-            roles.map((role) => <option key={role.id} value={role.id}>{role.name}</option>)
+            roles?.map((role) => <option key={role.id} value={role.id}>{role.name}</option>)
           }
         </FormControl>
       )}