Add loading feedback in Persona settings menu

.changeset/add_loading_feedback_in_persona_settings_menu.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+# Add loading feedback in Persona settings menu

src/app/features/settings/Persona/PerMessageProfileEditor.tsx

@@ -426,13 +426,15 @@ export function PerMessageProfileEditor({
   /**
    * persisting the data :3
    */
-  const handleSave = useCallback(() => {
-    addOrUpdatePerMessageProfile(mx, {
-      id: profileId,
-      name: newDisplayName,
-      avatarUrl: avatarMxc,
-      pronouns: newPronouns,
-    }).then(() => {
+  const [saveState, handleSave] = useAsyncCallback(
+    useCallback(async () => {
+      await addOrUpdatePerMessageProfile(mx, {
+        id: profileId,
+        name: newDisplayName,
+        avatarUrl: avatarMxc,
+        pronouns: newPronouns,
+      });
+
       setCurrentDisplayName(newDisplayName);
       setCurrentPronouns(newPronouns);
       setImageHasChanges(false);
@@ -443,16 +445,17 @@ export function PerMessageProfileEditor({
           setCurrentId(newId);
         });
       }
-    });
-  }, [mx, profileId, newDisplayName, avatarMxc, newPronouns, hasIdChange, newId]);
+    }, [mx, profileId, newDisplayName, avatarMxc, newPronouns, hasIdChange, newId])
+  );
 
-  const handleDelete = useCallback(() => {
-    deletePerMessageProfile(mx, profileId).then(() => {
+  const [deleteState, handleDelete] = useAsyncCallback(
+    useCallback(async () => {
+      await deletePerMessageProfile(mx, profileId);
       setCurrentDisplayName('');
       setCurrentPronouns([]);
       if (onDelete) onDelete(profileId);
-    });
-  }, [mx, profileId, onDelete]);
+    }, [mx, profileId, onDelete])
+  );
 
   const handleIdChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setNewId(e.target.value);
@@ -658,23 +661,32 @@ export function PerMessageProfileEditor({
           size="400"
           radii="300"
           variant="Critical"
+          disabled={deleteState.status === AsyncStatus.Loading}
           fill="None"
           aria-label={`Delete profile ${profileId}`}
           title={`Delete profile ${profileId}`}
         >
-          <Text size="B300">Delete persona</Text>
+          {deleteState.status === AsyncStatus.Loading ? (
+            <Spinner size="100" variant="Critical" fill="Solid" />
+          ) : (
+            <Text size="B300">Delete persona</Text>
+          )}
         </Button>
 
         <Button
           onClick={handleSave}
           size="400"
           radii="300"
           variant="Primary"
-          disabled={!hasChanges}
+          disabled={!hasChanges || saveState.status === AsyncStatus.Loading}
           aria-label={`Save profile changes for ${profileId}`}
           title={`Save profile changes for ${profileId}`}
         >
-          <Text size="B300">Save</Text>
+          {saveState.status === AsyncStatus.Loading ? (
+            <Spinner size="100" variant="Primary" fill="Solid" />
+          ) : (
+            <Text size="B300">Save</Text>
+          )}
         </Button>
       </Box>
 

src/app/features/settings/Persona/PerMessageProfileOverview.tsx

@@ -5,12 +5,13 @@ import {
   getAllPerMessageProfiles,
   getPerMessageProfileById,
 } from '$hooks/usePerMessageProfile';
-import { useEffect, useState } from 'react';
-import { Box, Button, Text } from 'folds';
+import { useCallback, useEffect, useState } from 'react';
+import { Box, Button, Spinner, Text } from 'folds';
 import { generateShortId } from '$utils/shortIdGen';
 import { SequenceCard, SequenceCardStyle } from '$components/sequence-card';
 import { PerMessageProfileListItem } from './PerMessageProfileListItem';
 import { SettingTile } from '$components/setting-tile';
+import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 
 type PerMessageProfileOverviewProps = {
   onCreateProfile: (profile: PerMessageProfile) => void;
@@ -40,6 +41,17 @@ export function PerMessageProfileOverview({
     if (profile) onEditProfile(profile);
   };
 
+  const [addState, handleAdd] = useAsyncCallback(
+    useCallback(async () => {
+      const newProfile: PerMessageProfile = {
+        id: generateShortId(5),
+        name: 'New Profile',
+      };
+      await addOrUpdatePerMessageProfile(mx, newProfile);
+      onCreateProfile(newProfile);
+    }, [mx, onCreateProfile])
+  );
+
   return (
     <Box gap="100" direction="Column">
       <Text size="L400">Personas</Text>
@@ -58,17 +70,14 @@ export function PerMessageProfileOverview({
             <Button
               size="300"
               radii="300"
-              onClick={() => {
-                const newProfile: PerMessageProfile = {
-                  id: generateShortId(5),
-                  name: 'New Profile',
-                };
-                addOrUpdatePerMessageProfile(mx, newProfile).then(() => {
-                  onCreateProfile(newProfile);
-                });
-              }}
+              onClick={handleAdd}
+              disabled={addState.status === AsyncStatus.Loading}
             >
-              <Text size="B300">Add</Text>
+              {addState.status === AsyncStatus.Loading ? (
+                <Spinner size="100" variant="Primary" fill="Solid" />
+              ) : (
+                <Text size="B300">Add</Text>
+              )}
             </Button>
           }
         />