fix: :bug: Fix SSR prefetch by adding HydrationBoundary and stable cursor

[gruckion]

Changes

data-table-filters/src/app/infinite/

1. Fixed prefetchInfiniteQuery usage by wrapping the table in <HydrationBoundary>. Otherwise prefetching will not occur.
2. Added staleTime with non-zero value to the dataOptions to prevent immediate refetching.
3. Fixed Client component to accept server-parsed search params as props to avoid re-parsing on the client and timestamp mismatches.
4. Fixed initialPageParam in query options to use search.cursor.getTime() instead of new Date().getTime() to ensure the pageParam matches between server prefetch and client hydration.
5. Added loading.tsx and Skeleton component for better loading states during navigation (following the pattern from default table).

data-table-filters/src/app/light/

1. Added staleTime with non-zero value to the dataOptions to prevent immediate refetching.
2. Wrapped the table in <HydrationBoundary> for proper hydration.

data-table-filters/src/app/default/

Refactored to be consistent with the infinite scroll example, with async data fetching via the API route and non-zero staleTime for prefetching to not immediately refetch.

1. Refactored the DataTable into it's own Client component for consistency with the infinite scroll example.
2. Refactored the data to be async and fetch via the API route.
3. Created dataOptions to fetch the data via the API route with non-zero staleTime for prefetching to not immediately refetch.
4. Removed React.Suspense in favour of Next.js loading.tsx Alex Sidorenko "Navigation feels slow in Next.js".
5. Wrapped the table in a HydrationBoundary otherwise prefetching will not occur.

[vercel[bot]]

@gruckion is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
data-table-filters	Ready	Preview	Comment	Sep 21, 2025 6:39pm

[franky47]

The time range selectors don't work.

On the default page:

• Selecting a single date gives you a range in the URL that's {midnightUTCForThatDay}-{midnighUTCForThatDay}, it should probably be {midnightUTCForThatDay}-{23:59UTCForThatDay}
• The data shows log points for today (2025-09-21), but selecting from the 20th to the 22nd doesn't include them.

On the infinite page, the selection works from the tooltip, but now when dragging from the bars on top of the table.

[mxkaske]

On the default page:

• Selecting a single date gives you a range in the URL that's {midnightUTCForThatDay}-{midnighUTCForThatDay}, it should probably be {midnightUTCForThatDay}-{23:59UTCForThatDay}
• The data shows log points for today (2025-09-21), but selecting from the 20th to the 22nd doesn't include them.

On the infinite page, the selection works from the tooltip, but now when dragging from the bars on top of the table.

potentially non-related issues to the code changes 😅 - at least selecting a single data doesn't seem to work on prod