fix: bugs

src/components/Root/Root.tsx

@@ -57,7 +57,7 @@ const Root: FC = () => {
 
   // Show the spinner while loading except in demo mode (the demo config shows its own loading status)
   if (userData.loading || settingsQuery.isLoading || (!IS_DEMO_OR_PREVIEW && configQuery.isLoading)) {
-    return <LoadingOverlay />;
+    return <LoadingOverlay profileImageUrl={userData.profile?.avatar_url} />;
   }
 
   if (userData.canManageProfiles && userData.user && !userData.profile && !location.pathname.includes('/u/profiles')) {

src/containers/Profiles/CreateProfile.tsx

@@ -17,23 +17,26 @@ const CreateProfile = () => {
   const navigate = useNavigate();
   const { canManageProfiles } = useAccountStore.getState();
   const [fullName, setFullName] = useState<string>('');
-  const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [avatarUrl, setAvatarUrl] = useState<string>(AVATARS[Math.floor(Math.random() * AVATARS.length)]);
 
   useEffect(() => {
     if (!canManageProfiles) navigate('/');
   }, [canManageProfiles, navigate]);
 
   // this is only needed so we can set different avatar url which will be temporary
   const listProfiles = useListProfiles();
-  const activeProfiles = listProfiles.data?.responseData.collection?.length || 0;
 
   const initialValues = {
     name: '',
     adult: 'true',
-    avatar_url: '',
+    avatar_url: avatarUrl,
     pin: undefined,
   };
 
+  useEffect(() => {
+    setAvatarUrl(AVATARS[Math.floor(Math.random() * AVATARS.length)]);
+  }, [setAvatarUrl]);
+
   const createProfileHandler: UseFormOnSubmitHandler<ProfileFormValues> = async (formData, { setSubmitting, setErrors }) => {
     try {
       const profile = (
@@ -65,7 +68,7 @@ const CreateProfile = () => {
         <div className={styles.panel}>
           <div className={profileStyles.avatar}>
             <h2>Howdy{`${fullName && ','} ${fullName}`}</h2>
-            <img src={avatarUrl || AVATARS[activeProfiles]} />
+            <img src={avatarUrl} />
           </div>
         </div>
       </div>

src/containers/Profiles/DeleteProfile.tsx

@@ -62,7 +62,7 @@ const DeleteProfile = () => {
           </div>
           <div className={styles.deleteButtons}>
             <Button label="Delete" color="delete" variant="contained" onClick={deleteHandler} />
-            <Button label="Cancel" variant="outlined" onClick={closeHandler} />
+            <Button className={styles.cancelButton} label="Cancel" variant="outlined" onClick={closeHandler} />
           </div>
         </div>
       </Dialog>

src/containers/Profiles/EditProfile.tsx

@@ -91,7 +91,7 @@ const EditProfile = ({ contained = false }: EditProfileProps) => {
         <div className={styles.leftColumn}>
           <div className={styles.panel}>
             <div className={profileStyles.avatar}>
-              <h2>{fullName ? t('profile.greeting_with_name', { fullName }) : t('profile.greeting')}</h2>
+              <h2>{fullName ? t('profile.greeting_with_name', { name: fullName }) : t('profile.greeting')}</h2>
               <img src={selectedAvatar || profileDetails?.avatar_url} />
             </div>
           </div>

src/containers/Profiles/Form.tsx

@@ -44,7 +44,7 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
   });
 
   const { handleSubmit, handleChange, values, errors, submitting, setValue } = useForm(initialValues, formHandler, validationSchema);
-
+  const isDirty = Object.entries(values).some(([k, v]) => v !== initialValues[k as keyof typeof initialValues]);
   useEffect(() => {
     setValue('avatar_url', selectedAvatar?.value || profile?.avatar_url || '');
   }, [profile?.avatar_url, selectedAvatar?.value, setValue]);
@@ -104,7 +104,7 @@ const Form = ({ initialValues, formHandler, setFullName, selectedAvatar, showCan
           </div>
         </div>
         <>
-          <Button type="submit" label={t('account.save')} variant="outlined" disabled={submitting} />
+          <Button type="submit" label={t('account.save')} variant="outlined" disabled={!isDirty || submitting} />
           {showCancelButton && <Button onClick={() => navigate('/u/profiles')} label={t('account.cancel')} variant="text" />}
         </>
       </div>

src/containers/Profiles/Profiles.module.scss

@@ -65,6 +65,10 @@
     display: flex;
     justify-content: flex-end;
   }
+  .cancelButton {
+    margin-left: 6px;
+  }
+
   h2 {
     font-weight: 400;
     font-size: 20px;