Chore/logs reloading state (supabase#37252)

* Add loading opacity and keep previous data for logs

Wrapped TimelineChart and DataTableInfinite in divs with opacity transition during data fetching for improved UX. Added keepPreviousData: true to unified logs chart, count, and infinite queries to retain previous data while fetching new results.

* Remove keepPreviousData from logs count query

The keepPreviousData option was removed from the useUnifiedLogsCountQuery hook to rely on default query behavior or custom options. This may affect how data is retained between queries.

* Update UnifiedLogs.tsx

* Refactor TimelineChart opacity handling

Moved opacity and transition classes from a wrapping div directly to the TimelineChart component for cleaner structure and improved conditional styling.

Author: MildTomato

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -100,6 +100,8 @@ export const UnifiedLogs = () => {
     data: unifiedLogsData,
     isLoading,
     isFetching,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
     hasNextPage,
     refetch: refetchLogs,
     fetchNextPage,
@@ -131,6 +133,9 @@ export const UnifiedLogs = () => {
 
   const isRefetchingData = isFetching || isFetchingCounts || isFetchingCharts
 
+  // Only fade when filtering (not when loading more data or live mode)
+  const isFetchingButNotPaginating = isFetching && !isFetchingNextPage && !isFetchingPreviousPage
+
   const rawFlatData = useMemo(() => {
     return unifiedLogsData?.pages?.flatMap((page) => page.data ?? []) ?? []
   }, [unifiedLogsData?.pages])
@@ -336,7 +341,10 @@ export const UnifiedLogs = () => {
               />
               <TimelineChart
                 data={unifiedLogsChart}
-                className="-mb-2"
+                className={cn(
+                  '-mb-2',
+                  isFetchingCharts && 'opacity-60 transition-opacity duration-150'
+                )}
                 columnId="timestamp"
                 chartConfig={filteredChartConfig}
               />
@@ -351,7 +359,14 @@ export const UnifiedLogs = () => {
                 className="h-full"
               >
                 <ResizablePanelGroup key="main-logs" direction="vertical" className="h-full">
-                  <ResizablePanel defaultSize={100} minSize={30} className="bg">
+                  <ResizablePanel
+                    defaultSize={100}
+                    minSize={30}
+                    className={cn(
+                      'bg',
+                      isFetchingButNotPaginating && 'opacity-60 transition-opacity duration-150'
+                    )}
+                  >
                     <DataTableInfinite
                       columns={UNIFIED_LOGS_COLUMNS}
                       totalRows={totalDBRowCount}

apps/studio/data/logs/unified-logs-chart-query.ts

@@ -155,6 +155,7 @@ export const useUnifiedLogsChartQuery = <TData = UnifiedLogsChartData>(
     ({ signal }) => getUnifiedLogsChart({ projectRef, search }, signal),
     {
       enabled: enabled && typeof projectRef !== 'undefined',
+      keepPreviousData: true,
       ...UNIFIED_LOGS_QUERY_OPTIONS,
       ...options,
     }

apps/studio/data/logs/unified-logs-infinite-query.ts

@@ -168,6 +168,7 @@ export const useUnifiedLogsInfiniteQuery = <TData = UnifiedLogsData>(
     },
     {
       enabled: enabled && typeof projectRef !== 'undefined',
+      keepPreviousData: true,
       getPreviousPageParam: (firstPage) => {
         if (!firstPage.prevCursor) return null
         const result = { cursor: firstPage.prevCursor, direction: 'prev' }