close menu after confirming avatar (#9090)

* close menu after confirming avatar

* improve: show loading using `userReady`

* fix: useHookstate

Author: aditya-mitra

packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx

@@ -23,7 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import Avatar from '@etherealengine/client-core/src/common/components/Avatar'
@@ -44,8 +44,10 @@ import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
 import { EntityUUID } from '@etherealengine/common/src/interfaces/EntityUUID'
 import { AvatarState } from '@etherealengine/engine/src/avatar/state/AvatarNetworkState'
 import { useFind } from '@etherealengine/engine/src/common/functions/FeathersHooks'
+import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { avatarPath } from '@etherealengine/engine/src/schemas/user/avatar.schema'
 import { debounce } from 'lodash'
+import { LoadingCircle } from '../../../../components/LoadingCircle'
 import { UserMenus } from '../../../UserUISystem'
 import { AuthState } from '../../../services/AuthService'
 import { PopupMenuServices } from '../PopupMenuService'
@@ -58,6 +60,8 @@ const AvatarMenu = () => {
   const authState = useHookstate(getMutableState(AuthState))
   const userId = authState.user?.id?.value
   const userAvatarId = useHookstate(getMutableState(AvatarState)[Engine.instance.userID].avatarID as EntityUUID)
+  const avatarLoading = useHookstate(false)
+  const isUserReady = useHookstate(getMutableState(EngineState).userReady)
 
   const page = useHookstate(0)
   const selectedAvatarId = useHookstate('')
@@ -83,6 +87,7 @@ const AvatarMenu = () => {
       }
     }
     selectedAvatarId.set('')
+    avatarLoading.set(true)
   }
 
   const handleSearch = async (searchString: string) => {
@@ -94,22 +99,33 @@ const AvatarMenu = () => {
     searchTimeoutCancelRef.current = debounce(() => search.query.set(searchString), 1000).cancel
   }
 
+  useEffect(() => {
+    if (avatarLoading.value && isUserReady.value) {
+      avatarLoading.set(false)
+      PopupMenuServices.showPopupMenu()
+    }
+  }, [isUserReady, avatarLoading])
+
   return (
     <Menu
       open
       showBackButton
       actions={
         <Box display="flex" width="100%">
-          <Button
-            disabled={!currentAvatar || currentAvatar.id === userAvatarId.value}
-            startIcon={<Icon type="Check" />}
-            size="medium"
-            type="gradientRounded"
-            title={t('user:avatar.confirm')}
-            onClick={handleConfirmAvatar}
-          >
-            {t('user:avatar.confirm')}
-          </Button>
+          {avatarLoading.value ? (
+            <LoadingCircle />
+          ) : (
+            <Button
+              disabled={!currentAvatar || currentAvatar.id === userAvatarId.value}
+              startIcon={<Icon type="Check" />}
+              size="medium"
+              type="gradientRounded"
+              title={t('user:avatar.confirm')}
+              onClick={handleConfirmAvatar}
+            >
+              {t('user:avatar.confirm')}
+            </Button>
+          )}
         </Box>
       }
       title={t('user:avatar.titleSelectAvatar')}