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 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..5a3236c87c 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"; @@ -35,6 +36,8 @@ 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 NAV_WIDTH = "200px"; const FidesLogoHomeLink = () => ( @@ -142,9 +145,9 @@ export const UnconnectedMainSideNav = ({ @@ -221,12 +224,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 ( + + ); + } + return (