Fix flickering issues when updating profile fields

src/app/components/user-profile/UserChips.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -538,11 +538,16 @@ export function TimezoneChip({ timezone }: { timezone: string }) {
   );
   const [shortTime, setShortTime] = useState(shortFormat.format());
   const [longTime, setLongTime] = useState(longFormat.format());
-
-  useInterval(() => {
+  const updateTime = useCallback(() => {
     setShortTime(shortFormat.format());
     setLongTime(longFormat.format());
-  }, 1000);
+  }, [setShortTime, setLongTime, shortFormat, longFormat]);
+
+  useEffect(() => {
+    updateTime();
+  }, [timezone, updateTime]);
+
+  useInterval(updateTime, 1000);
 
   return (
     <TooltipProvider

src/app/features/settings/account/Profile.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactNode,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -385,16 +386,18 @@ export function Profile() {
   const [extendedProfileState, refreshExtendedProfile] = useExtendedProfile(userId);
   const extendedProfile =
     extendedProfileState.status === AsyncStatus.Success ? extendedProfileState.data : undefined;
-  const fieldDefaults = useMemo<ExtendedProfile>(
-    () =>
-      extendedProfile !== undefined
-        ? {
+
+  const [fieldDefaults, setFieldDefaults] = useState<ExtendedProfile>({})
+  useLayoutEffect(() => {
+    if (extendedProfile !== undefined) {
+      setFieldDefaults(
+        {
           ...extendedProfile,
           displayname: extendedProfile.displayname ?? getMxIdLocalPart(userId) ?? userId,
         }
-        : {},
-    [userId, extendedProfile]
       );
+    }
+  }, [userId, setFieldDefaults, extendedProfile]);
 
   const useAuthentication = useMediaAuthentication();
 
@@ -473,7 +476,7 @@ export function Profile() {
                   <ProfileAvatar />
                   <ProfileTextField field="displayname" label="Display Name" />
                   <ProfileTimezone />
-                  <Box gap="300">
+                  <Box gap="300" alignItems='Center'>
                     <Button
                       type="submit"
                       size="300"
@@ -484,7 +487,6 @@ export function Profile() {
                       disabled={!hasChanges || busy}
                       onClick={save}
                     >
-                      {saving && <Spinner variant="Success" fill="Solid" size="300" />}
                       <Text size="B300">Save</Text>
                     </Button>
                     <Button
@@ -499,6 +501,7 @@ export function Profile() {
                       >
                       <Text size="B300">Cancel</Text>
                     </Button>
+                    {saving && <Spinner size="300" />}
                   </Box>
                 </SequenceCard>
               </>