From d98dbe7bbc1832d4dbe2e5e7b9724cd56bca67bd Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Thu, 19 Oct 2023 18:27:04 +0530 Subject: [PATCH 1/3] close menu after confirming avatar --- .../src/user/components/UserMenu/menus/AvatarSelectMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx index ce49c7739c..156fcf0cc7 100644 --- a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx +++ b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx @@ -83,6 +83,7 @@ const AvatarMenu = () => { } } selectedAvatarId.set('') + PopupMenuServices.showPopupMenu() } const handleSearch = async (searchString: string) => { From 75ccb6d45eef838b303da05ea513e6f989e43537 Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 20 Oct 2023 18:48:20 +0530 Subject: [PATCH 2/3] improve: show loading using `userReady` --- .../UserMenu/menus/AvatarSelectMenu.tsx | 42 +++++++++++++------ 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx index 156fcf0cc7..fc7c0e3744 100644 --- a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx +++ b/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' @@ -35,7 +35,7 @@ import Text from '@etherealengine/client-core/src/common/components/Text' import { AvatarEffectComponent } from '@etherealengine/engine/src/avatar/components/AvatarEffectComponent' import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine' import { hasComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions' -import { getMutableState, useHookstate } from '@etherealengine/hyperflux' +import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux' import Box from '@etherealengine/ui/src/primitives/mui/Box' import Grid from '@etherealengine/ui/src/primitives/mui/Grid' import Icon from '@etherealengine/ui/src/primitives/mui/Icon' @@ -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 = getState(EngineState).userReady const page = useHookstate(0) const selectedAvatarId = useHookstate('') @@ -83,7 +87,7 @@ const AvatarMenu = () => { } } selectedAvatarId.set('') - PopupMenuServices.showPopupMenu() + avatarLoading.set(true) } const handleSearch = async (searchString: string) => { @@ -95,22 +99,34 @@ const AvatarMenu = () => { searchTimeoutCancelRef.current = debounce(() => search.query.set(searchString), 1000).cancel } + useEffect(() => { + console.log('debug1 userReady value is', isUserReady) + if (avatarLoading.value && isUserReady) { + avatarLoading.set(false) + PopupMenuServices.showPopupMenu() + } + }, [isUserReady, avatarLoading]) + return ( - + {avatarLoading.value ? ( + + ) : ( + + )} } title={t('user:avatar.titleSelectAvatar')} From 309b8ba2eba7bf45fa437ceecf85917d6608d691 Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Mon, 23 Oct 2023 10:05:31 +0530 Subject: [PATCH 3/3] fix: useHookstate --- .../user/components/UserMenu/menus/AvatarSelectMenu.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx index fc7c0e3744..f1e547f596 100644 --- a/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx +++ b/packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx @@ -35,7 +35,7 @@ import Text from '@etherealengine/client-core/src/common/components/Text' import { AvatarEffectComponent } from '@etherealengine/engine/src/avatar/components/AvatarEffectComponent' import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine' import { hasComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions' -import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux' +import { getMutableState, useHookstate } from '@etherealengine/hyperflux' import Box from '@etherealengine/ui/src/primitives/mui/Box' import Grid from '@etherealengine/ui/src/primitives/mui/Grid' import Icon from '@etherealengine/ui/src/primitives/mui/Icon' @@ -61,7 +61,7 @@ const AvatarMenu = () => { const userId = authState.user?.id?.value const userAvatarId = useHookstate(getMutableState(AvatarState)[Engine.instance.userID].avatarID as EntityUUID) const avatarLoading = useHookstate(false) - const isUserReady = getState(EngineState).userReady + const isUserReady = useHookstate(getMutableState(EngineState).userReady) const page = useHookstate(0) const selectedAvatarId = useHookstate('') @@ -100,8 +100,7 @@ const AvatarMenu = () => { } useEffect(() => { - console.log('debug1 userReady value is', isUserReady) - if (avatarLoading.value && isUserReady) { + if (avatarLoading.value && isUserReady.value) { avatarLoading.set(false) PopupMenuServices.showPopupMenu() }