Wait until flags are loaded to show beta modal

app/src/components/nav/AppShell.tsx

@@ -168,6 +168,7 @@ export default function AppShell({
   }, [requireAuth, user, authLoading]);
 
   const flags = useAppStore((s) => s.featureFlags.featureFlags);
+  const flagsLoaded = useAppStore((s) => s.featureFlags.flagsLoaded);
 
   return (
     <>
@@ -180,7 +181,7 @@ export default function AppShell({
           {children}
         </Box>
       </Flex>
-      {requireBeta && !flags.betaAccess && <BetaModal />}
+      {requireBeta && flagsLoaded && !flags.betaAccess && <BetaModal />}
     </>
   );
 }

app/src/state/featureFlags.ts

@@ -1,6 +1,7 @@
 import { type SliceCreator } from "./store";
 
 export type FeatureFlagsSlice = {
+  flagsLoaded: boolean;
   featureFlags: {
     betaAccess: boolean;
   };
@@ -8,6 +9,7 @@ export type FeatureFlagsSlice = {
 };
 
 export const createFeatureFlagsSlice: SliceCreator<FeatureFlagsSlice> = (set) => ({
+  flagsLoaded: false,
   featureFlags: {
     betaAccess: false,
   },
@@ -16,5 +18,6 @@ export const createFeatureFlagsSlice: SliceCreator<FeatureFlagsSlice> = (set) =>
       state.featureFlags.featureFlags = {
         betaAccess: flags?.includes("betaAccess") ?? false,
       };
+      state.featureFlags.flagsLoaded = true;
     }),
 });