diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx index f2a1cf2035e..425e4b246ad 100644 --- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx +++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx @@ -1,7 +1,14 @@ import { useParams } from 'common' import dayjs from 'dayjs' +import { GitPullRequest } from 'lucide-react' import Link from 'next/link' import { PropsWithChildren, ReactNode } from 'react' +import { useInView } from 'react-intersection-observer' + +import ShimmeringLoader from 'components/ui/ShimmeringLoader' +import { useBranchQuery } from 'data/branches/branch-query' +import { Branch } from 'data/branches/branches-query' +import { GitHubPullRequest } from 'data/integrations/integrations-github-pull-requests-query' import { Badge, Button, @@ -15,11 +22,7 @@ import { IconShield, IconTrash, } from 'ui' - -import ShimmeringLoader from 'components/ui/ShimmeringLoader' -import { Branch } from 'data/branches/branches-query' -import { GitHubPullRequest } from 'data/integrations/integrations-github-pull-requests-query' -import { GitPullRequest } from 'lucide-react' +import BranchStatusBadge from './BranchStatusBadge' interface BranchManagementSectionProps { header: string @@ -86,8 +89,8 @@ export const BranchRow = ({ generateCreatePullRequestURL, onSelectDeleteBranch, }: BranchRowProps) => { - const { ref } = useParams() - const isActive = ref === branch?.project_ref + const { ref: projectRef } = useParams() + const isActive = projectRef === branch?.project_ref const daysFromNow = dayjs().diff(dayjs(branch.updated_at), 'day') const formattedTimeFromNow = dayjs(branch.updated_at).fromNow() @@ -96,8 +99,23 @@ export const BranchRow = ({ const createPullRequestURL = generateCreatePullRequestURL?.(branch.git_branch) ?? 'https://github.com' + const { ref, inView } = useInView() + const { data } = useBranchQuery( + { projectRef, id: branch.id }, + { + enabled: inView, + refetchInterval(data) { + if (data?.status !== 'ACTIVE_HEALTHY') { + return 1000 * 3 // 3 seconds + } + + return false + }, + } + ) + return ( -
+
{isActive && Current} + {data?.status !== undefined && }

{daysFromNow > 1 ? `Updated on ${formattedUpdatedAt}` : `Updated ${formattedTimeFromNow}`}

@@ -155,7 +174,7 @@ export const BranchRow = ({