Changes for Avatar Select / Upload Menu Improvements (#7619)

* Added spinner until the avatar is successfully uploaded * Added 1 second as throttle for search deplay in avatar search.
Legend101Zz · Feb 24, 2023 · efe5f4d · efe5f4d
1 parent 43756d9
commit efe5f4d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 37 deletions.
diff --git a/packages/client-core/i18n/en/user.json b/packages/client-core/i18n/en/user.json
@@ -3,6 +3,7 @@
     "delete": "Delete",
     "edit": "Edit",
     "save": "Save",
+    "saving": "Saving",
     "upload": "Upload",
     "discardChanges": "Discard Changes",
     "confirmDiscardChange": "Changes you made may not be saved."

diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarModifyMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarModifyMenu.tsx
@@ -23,6 +23,7 @@ import {
 import { AvatarInterface } from '@xrengine/common/src/interfaces/AvatarInterface'
 import { AssetLoader } from '@xrengine/engine/src/assets/classes/AssetLoader'
 import Box from '@xrengine/ui/src/Box'
+import CircularProgress from '@xrengine/ui/src/CircularProgress'
 import Grid from '@xrengine/ui/src/Grid'
 import Icon from '@xrengine/ui/src/Icon'
 import IconButton from '@xrengine/ui/src/IconButton'
@@ -55,6 +56,7 @@ const AvatarModifyMenu = ({ selectedAvatar, changeActiveMenu }: Props) => {
   const [avatarSrc, setAvatarSrc] = useState('')
   const [showConfirmThumbnail, setShowConfirmThumbnail] = useState(false)
   const [showConfirmChanges, setShowConfirmChanges] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
   const avatarRef = useRef<HTMLInputElement | null>(null)
   const thumbnailRef = useRef<HTMLInputElement | null>(null)
 
@@ -235,38 +237,46 @@ const AvatarModifyMenu = ({ selectedAvatar, changeActiveMenu }: Props) => {
   }
 
   const handleSave = async () => {
-    let avatarBlob: Blob | undefined = undefined
-    let thumbnailBlob: Blob | undefined = undefined
-
-    if (state.avatarFile) {
-      avatarBlob = state.avatarFile
-    } else if (state.avatarUrl) {
-      const avatarData = await fetch(state.avatarUrl)
-      avatarBlob = await avatarData.blob()
-    }
+    setIsSaving(true)
 
-    if (state.thumbnailFile) {
-      thumbnailBlob = state.thumbnailFile
-    } else if (state.thumbnailUrl) {
-      const thumbnailData = await fetch(state.thumbnailUrl)
-      thumbnailBlob = await thumbnailData.blob()
-    }
+    try {
+      let avatarBlob: Blob | undefined = undefined
+      let thumbnailBlob: Blob | undefined = undefined
 
-    if (selectedAvatar) {
-      await AvatarService.patchAvatar(
-        selectedAvatar,
-        state.name,
-        selectedAvatar.modelResource?.url !== state.avatarUrl ||
-          selectedAvatar.thumbnailResource?.url !== state.thumbnailUrl,
-        avatarBlob,
-        thumbnailBlob
-      )
-      changeActiveMenu(Views.AvatarSelect)
-    } else if (avatarBlob && thumbnailBlob) {
-      await AvatarService.createAvatar(avatarBlob, thumbnailBlob, state.name, false)
+      if (state.avatarFile) {
+        avatarBlob = state.avatarFile
+      } else if (state.avatarUrl) {
+        const avatarData = await fetch(state.avatarUrl)
+        avatarBlob = await avatarData.blob()
+      }
 
-      changeActiveMenu(Views.Closed)
+      if (state.thumbnailFile) {
+        thumbnailBlob = state.thumbnailFile
+      } else if (state.thumbnailUrl) {
+        const thumbnailData = await fetch(state.thumbnailUrl)
+        thumbnailBlob = await thumbnailData.blob()
+      }
+
+      if (selectedAvatar) {
+        await AvatarService.patchAvatar(
+          selectedAvatar,
+          state.name,
+          selectedAvatar.modelResource?.url !== state.avatarUrl ||
+            selectedAvatar.thumbnailResource?.url !== state.thumbnailUrl,
+          avatarBlob,
+          thumbnailBlob
+        )
+        changeActiveMenu(Views.AvatarSelect)
+      } else if (avatarBlob && thumbnailBlob) {
+        await AvatarService.createAvatar(avatarBlob, thumbnailBlob, state.name, false)
+
+        changeActiveMenu(Views.Closed)
+      }
+    } catch (err) {
+      console.error(err)
     }
+
+    setIsSaving(false)
   }
 
   const handleBack = () => {
@@ -284,14 +294,16 @@ const AvatarModifyMenu = ({ selectedAvatar, changeActiveMenu }: Props) => {
       actions={
         <Box display="flex" width="100%">
           <Button
-            disabled={!hasPendingChanges || hasErrors}
-            startIcon={<Icon type="Check" />}
+            disabled={!hasPendingChanges || hasErrors || isSaving}
+            startIcon={
+              isSaving ? <CircularProgress size={24} sx={{ color: 'var(--textColor)' }} /> : <Icon type="Check" />
+            }
             size="medium"
             type="gradientRounded"
-            title={t('user:common.save')}
+            title={isSaving ? t('user:common.saving') : t('user:common.save')}
             onClick={handleSave}
           >
-            {t('user:common.save')}
+            {isSaving ? t('user:common.saving') : t('user:common.save')}
           </Button>
         </Box>
       }

diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx
@@ -30,12 +30,14 @@ const AvatarMenu = ({ changeActiveMenu }: Props) => {
   const userId = authState.user?.id?.value
   const userAvatarId = authState.user?.avatarId?.value
 
-  const [page, setPage] = useState(0)
-  const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(userAvatarId)
-
   const avatarState = useAvatarService()
   const { avatarList, search } = avatarState.value
 
+  const [page, setPage] = useState(0)
+  const [localSearchString, setLocalSearchString] = useState(search)
+  const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(userAvatarId)
+  const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null)
+
   const selectedAvatar = avatarList.find((item) => item.id === selectedAvatarId)
 
   useEffect(() => {
@@ -71,6 +73,20 @@ const AvatarMenu = ({ changeActiveMenu }: Props) => {
     AvatarService.fetchAvatarList(search, 'decrement')
   }
 
+  const handleSearch = async (searchString: string) => {
+    setLocalSearchString(searchString)
+
+    if (searchTimeout) {
+      clearTimeout(searchTimeout)
+    }
+
+    const timeout = setTimeout(() => {
+      AvatarService.fetchAvatarList(searchString)
+    }, 1000)
+
+    setSearchTimeout(timeout)
+  }
+
   return (
     <Menu
       open
@@ -102,9 +118,9 @@ const AvatarMenu = ({ changeActiveMenu }: Props) => {
           <Grid item md={6} sx={{ width: '100%' }}>
             <InputText
               placeholder={t('user:avatar.searchAvatar')}
-              value={search}
+              value={localSearchString}
               sx={{ mt: 1 }}
-              onChange={(e) => AvatarService.fetchAvatarList(e.target.value)}
+              onChange={(e) => handleSearch(e.target.value)}
             />
 
             <IconButton