From 04e104967c02f193ace5568a835483a11ce6a016 Mon Sep 17 00:00:00 2001
From: Allison King <allisonjuliaking@gmail.com>
Date: Wed, 24 Jan 2024 16:13:48 -0500
Subject: [PATCH 1/4] Do not render nav until we are finished loading

---
 .../src/features/common/nav/v2/MainSideNav.tsx  | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
index 4b6d346bdd..07eb3ecc88 100644
--- a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
+++ b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
@@ -27,6 +27,7 @@ import logoImage from "~/../public/logo-white.svg";
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 import { logout, selectUser, useLogoutMutation } from "~/features/auth";
 import Image from "~/features/common/Image";
+import { useGetHealthQuery } from "~/features/plus/plus.slice";
 
 import { useNav } from "./hooks";
 import { ActiveNav, NavGroup, NavGroupChild } from "./nav-config";
@@ -221,12 +222,28 @@ const MainSideNav = () => {
   const [logoutMutation] = useLogoutMutation();
   const dispatch = useAppDispatch();
   const user = useAppSelector(selectUser);
+  const plusQuery = useGetHealthQuery();
   const username = user ? user.username : "";
 
   const handleLogout = async () => {
     await logoutMutation({});
     dispatch(logout());
   };
+
+  // While we are loading if we have plus, the nav isn't ready to display yet
+  // since otherwise new items can suddenly pop in. So instead, we render an empty
+  // version of the nav during load, so that when the nav does load, it is fully featured.
+  if (plusQuery.isLoading) {
+    return (
+      <Box
+        minWidth="200px"
+        maxWidth="200px"
+        backgroundColor="#191D27"
+        height="100%"
+      />
+    );
+  }
+
   return (
     <UnconnectedMainSideNav
       {...nav}

From 31757f9f7ece08e827eda4bea1384519f2649054 Mon Sep 17 00:00:00 2001
From: Allison King <allisonjuliaking@gmail.com>
Date: Wed, 24 Jan 2024 16:19:28 -0500
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec7bfaceb4..d30e01a625 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.28.0...main)
 
+### Changed
+- Delay rendering the nav until all necessary queries are finished loading [#4571](https://github.com/ethyca/fides/pull/4571)
+
 ## [2.28.0](https://github.com/ethyca/fides/compare/2.27.0...2.28.0)
 
 ### Added

From 3157bb2ebd7560d729955ccd548026f7dacdfdf4 Mon Sep 17 00:00:00 2001
From: Allison King <allisonjuliaking@gmail.com>
Date: Wed, 24 Jan 2024 17:02:25 -0500
Subject: [PATCH 3/4] Pull background color into constant

---
 clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
index 07eb3ecc88..940bfe9530 100644
--- a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
+++ b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
@@ -36,6 +36,7 @@ import { INDEX_ROUTE } from "./routes";
 const LINK_HOVER_BACKGROUND_COLOR = "#28303F";
 const LINK_ACTIVE_BACKGROUND_COLOR = "#7745F0";
 const LINK_COLOR = "#CBD5E0";
+const NAV_BACKGROUND_COLOR = "#191D27";
 
 const FidesLogoHomeLink = () => (
   <Box px={2}>
@@ -145,7 +146,7 @@ export const UnconnectedMainSideNav = ({
     pb={0}
     minWidth="200px"
     maxWidth="200px"
-    backgroundColor="#191D27"
+    backgroundColor={NAV_BACKGROUND_COLOR}
     height="100%"
     overflow="scroll"
   >
@@ -238,7 +239,7 @@ const MainSideNav = () => {
       <Box
         minWidth="200px"
         maxWidth="200px"
-        backgroundColor="#191D27"
+        backgroundColor={NAV_BACKGROUND_COLOR}
         height="100%"
       />
     );

From e4be4943a55746614b476e12a92b30308b7a10db Mon Sep 17 00:00:00 2001
From: Neville Samuell <neville@ethyca.com>
Date: Wed, 24 Jan 2024 17:39:16 -0500
Subject: [PATCH 4/4] Minor nit!

---
 .../admin-ui/src/features/common/nav/v2/MainSideNav.tsx  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
index 940bfe9530..5a3236c87c 100644
--- a/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
+++ b/clients/admin-ui/src/features/common/nav/v2/MainSideNav.tsx
@@ -37,6 +37,7 @@ const LINK_HOVER_BACKGROUND_COLOR = "#28303F";
 const LINK_ACTIVE_BACKGROUND_COLOR = "#7745F0";
 const LINK_COLOR = "#CBD5E0";
 const NAV_BACKGROUND_COLOR = "#191D27";
+const NAV_WIDTH = "200px";
 
 const FidesLogoHomeLink = () => (
   <Box px={2}>
@@ -144,8 +145,8 @@ export const UnconnectedMainSideNav = ({
   <Box
     p={4}
     pb={0}
-    minWidth="200px"
-    maxWidth="200px"
+    minWidth={NAV_WIDTH}
+    maxWidth={NAV_WIDTH}
     backgroundColor={NAV_BACKGROUND_COLOR}
     height="100%"
     overflow="scroll"
@@ -237,8 +238,8 @@ const MainSideNav = () => {
   if (plusQuery.isLoading) {
     return (
       <Box
-        minWidth="200px"
-        maxWidth="200px"
+        minWidth={NAV_WIDTH}
+        maxWidth={NAV_WIDTH}
         backgroundColor={NAV_BACKGROUND_COLOR}
         height="100%"
       />