update CoverageChart to use updated useRepoCoverageTimeseries

Author: nsdeschenes

src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.test.tsx

@@ -1,4 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen, within } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
@@ -26,21 +30,27 @@ vi.mock('recharts', async () => {
   }
 })
 
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const wrapper =
   (
     initialEntries = ['/gh/codecov/bells-hells/tree/main']
   ): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={initialEntries}>
-        <Route path="/:provider/:owner/:repo">{children}</Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route path="/:provider/:owner/:repo">{children}</Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
-const queryClient = new QueryClient({
-  defaultOptions: { queries: { retry: false } },
-})
 const server = setupServer()
 
 beforeAll(() => {
@@ -73,6 +83,7 @@ beforeEach(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 

src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.tsx

@@ -1,3 +1,4 @@
+import { keepPreviousData } from '@tanstack/react-queryV5'
 import { format } from 'date-fns'
 import { useParams } from 'react-router-dom'
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
@@ -43,17 +44,16 @@ function CoverageChart() {
     defaultBranch: overview?.defaultBranch ?? '',
   })
 
-  const { data, isPreviousData, isLoading, isError } =
+  const { data, isPlaceholderData, isPending, isError } =
     useRepoCoverageTimeseries({
       branch: selection?.name,
       options: {
         enabled: !!selection?.name,
-        suspense: false,
-        keepPreviousData: true,
+        placeholderData: keepPreviousData,
       },
     })
 
-  if (!isPreviousData && isLoading) {
+  if (!isPlaceholderData && isPending) {
     return <Placeholder />
   }
 
@@ -65,7 +65,7 @@ function CoverageChart() {
     )
   }
 
-  if (data?.measurements.length < 1) {
+  if (!isPending && data?.measurements?.length < 1) {
     return (
       <div className="flex min-h-[250px] items-center justify-center xl:min-h-[380px]">
         <p className="text-center">