diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx index 91cf7af903..237bb5c03b 100644 --- a/apps/web/components/Shell.tsx +++ b/apps/web/components/Shell.tsx @@ -425,14 +425,11 @@ export default function Shell(props: LayoutProps) { const i18n = useViewerI18n(); const { status } = useSession(); - const isLoading = - i18n.status === "loading" || - query.status === "loading" || - isRedirectingToOnboarding || - loading || - !isReady; + const isLoading = query.status === "loading" || isRedirectingToOnboarding || loading || !isReady; - if (isLoading) { + // Don't show any content till translations are loaded. + // As they are cached infintely, this status would be loading just once for the app's lifetime until refresh + if (i18n.status === "loading") { return (
@@ -455,6 +452,7 @@ function UserDropdown({ small }: { small?: boolean }) { const { t } = useLocale(); const query = useMeQuery(); const user = query.data; + const mutation = trpc.useMutation("viewer.away", { onSettled() { utils.invalidateQueries("viewer.me"); @@ -469,6 +467,11 @@ function UserDropdown({ small }: { small?: boolean }) { setMenuOpen(false); }; + // Prevent rendering dropdown if user isn't available. + // We don't want to show nameless user. + if (!user) { + return null; + } return ( setHelpOpen(false)}> setMenuOpen(true)}>