O11y Overview: wait for flags loaded before redirect DEPR-372 (#42689)

https://linear.app/supabase/issue/DEPR-372/observability-overview-redirects-to-custom-reports-on-refresh

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Prevented premature redirect on the observability page by waiting for
feature flags to finish loading before running redirect logic.
* Added an early loading guard to display a logo loader until feature
flags and page data are ready, reducing UI flicker.
* Consistently render the empty-state and report creation UI when the
overview is not shown, simplifying display logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/pages/project/[ref]/observability/index.tsx

@@ -1,25 +1,25 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-
-import { useParams, useFlag } from 'common'
-import { CreateReportModal } from 'components/interfaces/Reports/CreateReportModal'
+import { useFeatureFlags, useFlag, useParams } from 'common'
 import { ObservabilityOverview } from 'components/interfaces/Observability/ObservabilityOverview'
+import { CreateReportModal } from 'components/interfaces/Reports/CreateReportModal'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ObservabilityLayout from 'components/layouts/ObservabilityLayout/ObservabilityLayout'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { useContentQuery } from 'data/content/content-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
+import { useRouter } from 'next/router'
+import { parseAsBoolean, useQueryState } from 'nuqs'
+import { useEffect, useState } from 'react'
 import type { NextPageWithLayout } from 'types'
 import { LogoLoader } from 'ui'
-import { parseAsBoolean, useQueryState } from 'nuqs'
 
 export const UserReportPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = useParams()
 
   const { profile } = useProfile()
+  const { hasLoaded: flagsLoaded } = useFeatureFlags()
   const showOverview = useFlag('observabilityOverview')
   const [showCreateReportModal, setShowCreateReportModal] = useQueryState(
     'newReport',
@@ -37,6 +37,7 @@ export const UserReportPage: NextPageWithLayout = () => {
 
   useEffect(() => {
     if (!isSuccess) return
+    if (!flagsLoaded) return // Wait for flags to load before checking redirect
     if (showOverview) return // Don't redirect if overview is enabled
 
     const reports = data.content
@@ -44,7 +45,7 @@ export const UserReportPage: NextPageWithLayout = () => {
       .sort((a, b) => a.name.localeCompare(b.name))
     if (reports.length >= 1) router.push(`/project/${ref}/observability/${reports[0].id}`)
     if (reports.length === 0) router.push(`/project/${ref}/observability/api-overview`)
-  }, [isSuccess, data, router, ref, showOverview])
+  }, [isSuccess, data, router, ref, showOverview, flagsLoaded])
 
   const { can: canCreateReport } = useAsyncCheckPermissions(
     PermissionAction.CREATE,
@@ -55,6 +56,11 @@ export const UserReportPage: NextPageWithLayout = () => {
     }
   )
 
+  // Wait for flags to load before rendering to avoid flashing wrong page
+  if (!flagsLoaded || isLoading) {
+    return <LogoLoader />
+  }
+
   // Show overview page if feature flag is enabled
   if (showOverview) {
     return <ObservabilityOverview />
@@ -62,34 +68,28 @@ export const UserReportPage: NextPageWithLayout = () => {
 
   return (
     <div className="h-full w-full">
-      {isLoading ? (
-        <LogoLoader />
-      ) : (
-        <>
-          <ProductEmptyState
-            title="Observability"
-            ctaButtonLabel="New custom report"
-            onClickCta={() => {
-              setShowCreateReportModal(true)
-            }}
-            disabled={!canCreateReport}
-            disabledMessage="You need additional permissions to create a report"
-          >
-            <p className="text-foreground-light text-sm">
-              Create custom reports for your projects.
-            </p>
-            <p className="text-foreground-light text-sm">
-              Get a high level overview of your network traffic, user actions, and infrastructure
-              health.
-            </p>
-          </ProductEmptyState>
-          <CreateReportModal
-            visible={showCreateReportModal}
-            onCancel={() => setShowCreateReportModal(false)}
-            afterSubmit={() => setShowCreateReportModal(false)}
-          />
-        </>
-      )}
+      <>
+        <ProductEmptyState
+          title="Observability"
+          ctaButtonLabel="New custom report"
+          onClickCta={() => {
+            setShowCreateReportModal(true)
+          }}
+          disabled={!canCreateReport}
+          disabledMessage="You need additional permissions to create a report"
+        >
+          <p className="text-foreground-light text-sm">Create custom reports for your projects.</p>
+          <p className="text-foreground-light text-sm">
+            Get a high level overview of your network traffic, user actions, and infrastructure
+            health.
+          </p>
+        </ProductEmptyState>
+        <CreateReportModal
+          visible={showCreateReportModal}
+          onCancel={() => setShowCreateReportModal(false)}
+          afterSubmit={() => setShowCreateReportModal(false)}
+        />
+      </>
     </div>
   )
 }