Fix shell flicker (#3314)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Hariom Balhara 2022-07-11 20:07:20 +05:30 committed by GitHub
parent 8f495f7b67
commit 93ab0cfd09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 (
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
<Loader />
@ -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 (
<Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
<DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>