fix: ensure that headerbar does not flicker when using custom color

src/App.jsx

@@ -40,14 +40,17 @@ const Layout = ({ appsInfoQuery }) => {
         sessionCookie?.serverTime &&
         systemInfo?.sessionTimeout
 
+    const appInfoQueryReady = Boolean(appsInfoQuery?.data)
     return (
         <div className={styles.container}>
             {supportsSessionHandler && (
                 <SessionHandler
                     sessionTimeoutInSeconds={systemInfo?.sessionTimeout}
                 />
             )}
-            <ConnectedHeaderBar appsInfoQuery={appsInfoQuery} />
+            {appInfoQueryReady && (
+                <ConnectedHeaderBar appsInfoQuery={appsInfoQuery} />
+            )}
             {/* Skip the routes in dev; they don't make the same sense */}
             {process.env.NODE_ENV !== 'development' ? <Outlet /> : null}
         </div>

src/components/ConnectedHeaderbar.jsx

@@ -97,7 +97,9 @@ export function ConnectedHeaderBar({ appsInfoQuery }) {
         ? selfPWAUpdateState
         : clientPWAUpdateState
 
-    const bgColor = appsInfoQuery?.data?.systemSettings.keyCustomColor
+    const bgColor =
+        appsInfoQuery?.data?.systemSettings.keyCustomColor || '#165c92'
+
     const color = useMemo(() => getContrastingColor(bgColor), [bgColor])
 
     const colorProviderProps = bgColor ? { bgColor, color } : {}

src/components/header-bar/header-bar.jsx

@@ -196,7 +196,6 @@ export const HeaderBar = ({
                         flex-direction: row;
                         align-items: center;
                         justify-content: space-between;
-                        background-color: #165c92;
                         color: ${colors.white};
                         height: 40px;
                     }