fix: force null return from global header until all values loaded (#5534)

Author: wdoconnell

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -77,42 +77,43 @@ export const GlobalHeader: FC = () => {
     }
   }, [orgsList])
 
-  const shouldLoadDropdowns = activeOrg?.id && activeAccount?.id
-  const shouldLoadAvatar =
+  const shouldLoadDropdowns = Boolean(activeOrg?.id && activeAccount?.id)
+  const shouldLoadAvatar = Boolean(
     user?.firstName && user?.lastName && user?.email && org?.id
-  const shouldLoadGlobalHeader = shouldLoadDropdowns || shouldLoadAvatar
+  )
+  const shouldLoadGlobalHeader = Boolean(
+    shouldLoadDropdowns || shouldLoadAvatar
+  )
 
   const caretStyle = {fontSize: '18px', color: InfluxColors.Grey65}
 
-  return (
-    shouldLoadGlobalHeader && (
-      <FlexBox
-        className="multiaccountorg--header"
-        justifyContent={JustifyContent.SpaceBetween}
-        margin={ComponentSize.Large}
-        testID="global-header--container"
-      >
-        {shouldLoadDropdowns && (
-          <FlexBox margin={ComponentSize.Medium}>
-            <AccountDropdown
-              activeAccount={activeAccount}
-              activeOrg={activeOrg}
-              accountsList={sortedAccounts}
-            />
-            <Icon glyph={IconFont.CaretOutlineRight} style={caretStyle} />
-            <OrgDropdown activeOrg={activeOrg} orgsList={sortedOrgs} />
-          </FlexBox>
-        )}
-
-        {shouldLoadAvatar && (
-          <IdentityUserAvatar
-            email={user.email}
-            firstName={user.firstName}
-            lastName={user.lastName}
-            orgId={org.id}
+  return shouldLoadGlobalHeader ? (
+    <FlexBox
+      className="multiaccountorg--header"
+      justifyContent={JustifyContent.SpaceBetween}
+      margin={ComponentSize.Large}
+      testID="global-header--container"
+    >
+      {shouldLoadDropdowns && (
+        <FlexBox margin={ComponentSize.Medium}>
+          <AccountDropdown
+            activeAccount={activeAccount}
+            activeOrg={activeOrg}
+            accountsList={sortedAccounts}
           />
-        )}
-      </FlexBox>
-    )
-  )
+          <Icon glyph={IconFont.CaretOutlineRight} style={caretStyle} />
+          <OrgDropdown activeOrg={activeOrg} orgsList={sortedOrgs} />
+        </FlexBox>
+      )}
+
+      {shouldLoadAvatar && (
+        <IdentityUserAvatar
+          email={user.email}
+          firstName={user.firstName}
+          lastName={user.lastName}
+          orgId={org.id}
+        />
+      )}
+    </FlexBox>
+  ) : null
 }