diff --git a/apps/studio/components/layouts/NavigationV2/AppSidebar.tsx b/apps/studio/components/layouts/NavigationV2/AppSidebar.tsx
index c3a81b36145..7024d3418c9 100644
--- a/apps/studio/components/layouts/NavigationV2/AppSidebar.tsx
+++ b/apps/studio/components/layouts/NavigationV2/AppSidebar.tsx
@@ -1,15 +1,20 @@
import { useParams } from 'common'
import { Plug } from 'lucide-react'
+import { useRouter } from 'next/router'
import { parseAsBoolean, useQueryState } from 'nuqs'
import { Button, cn, Sidebar, SidebarContent, SidebarHeader } from 'ui'
+import { ShimmeringLoader } from 'ui-patterns'
import { NavGroup } from './NavGroup'
import { useAppSidebarNavItems, type AppSidebarScope } from './useAppSidebarNavItems'
import { ConnectSheet } from '@/components/interfaces/ConnectSheet/ConnectSheet'
import { OrgSelector } from '@/components/layouts/Navigation/NavigationBar/OrgSelector'
import { ProjectBranchSelector } from '@/components/layouts/Navigation/NavigationBar/ProjectBranchSelector'
+import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
+import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
import { useHideSidebar } from '@/hooks/misc/useHideSidebar'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM } from '@/lib/constants'
export type { AppSidebarScope }
@@ -28,6 +33,8 @@ function AppSidebarNavBody({ scope, variant = 'desktop' }: AppSidebarNavBodyProp
const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
const { slug: orgRouteSlug } = useParams()
const { data: selectedOrganization } = useSelectedOrganizationQuery()
+ const { isPending: isLoadingOrganizations } = useOrganizationsQuery()
+ const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery()
const {
isProjectScope,
@@ -40,31 +47,57 @@ function AppSidebarNavBody({ scope, variant = 'desktop' }: AppSidebarNavBodyProp
organizationItems,
} = useAppSidebarNavItems({ scope })
- const isMobileSheet = variant === 'mobile-sheet'
- const selectorHeaderClass = cn('flex-col gap-2', isMobileSheet ? 'flex' : 'hidden md:flex')
+ const isBranch = project != null && project.parentRef !== project.ref
+ const { data: parentProject, isPending: isLoadingParentProject } = useProjectDetailQuery(
+ { ref: project?.parent_project_ref },
+ { enabled: Boolean(isProjectScope && isBranch && project?.parent_project_ref) }
+ )
+ const selectedProject = parentProject ?? project
+
+ const isOrgSelectorLoading = isLoadingOrganizations
+ const isProjectSelectorLoading =
+ isLoadingProject || (isBranch && isLoadingParentProject) || !selectedProject
const shouldShowOrgSelector =
!isProjectScope && IS_PLATFORM && (Boolean(orgRouteSlug) || Boolean(selectedOrganization))
+ const isHeaderLoading =
+ (shouldShowOrgSelector && isOrgSelectorLoading) || (isProjectScope && isProjectSelectorLoading)
+
+ const isMobileSheet = variant === 'mobile-sheet'
+ const selectorHeaderClass = cn('flex-col gap-2', isMobileSheet ? 'flex' : 'hidden md:flex')
+
return (
<>