[VW-268] Adding update polling to settings/integrations table

[markglose-bc]

Polls the Integrations tables for an update every 10 seconds (configurable in constants.ts)

I only tested this by faking an integration in the DB directly, so if someone would like to test this with a more real integration that would be lovely

Summary by CodeRabbit

• New Features
  • Integrations now automatically refresh at regular intervals.
  • Improved loading indicator to better distinguish initial loads from background refreshes.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
viper	Ready	Preview, Comment	May 21, 2026 5:38pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
viper-demo	Ignored		May 21, 2026 5:38pm

[coderabbitai]

Warning

Rate limit exceeded

@markglose-bc has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 53 minutes and 51 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b0a6d5fa-10e1-4438-a455-c8336793f346

📥 Commits

Reviewing files that changed from the base of the PR and between d851eba and b349283.

📒 Files selected for processing (1)

• src/features/integrations/components/integrations.tsx

📝 Walkthrough

Walkthrough

This PR enables automatic polling of integrations data every 10 seconds with background refetch, then refines the UI to show the loading indicator only during initial load rather than during background polling updates. The changes span a configuration constant, the custom hook that drives the query, and the consuming component's loading state logic.

Changes

Integrations Polling and Loading State

Layer / File(s)	Summary
Polling configuration and hook integration src/config/constants.ts, src/features/integrations/hooks/use-integrations.ts	Added INTEGRATIONS_POLL_INTERVAL_MS = 10_000 constant and configured useSuspenseIntegrations to enable polling at that interval with refetchIntervalInBackground: true to keep data fresh without blocking the UI.
Component loading state refinement src/features/integrations/components/integrations.tsx	Updated IntegrationsList to compute isInitialLoad as isFetching && !isRefetching to separate initial fetch from background polling, then changed DataTable's isLoading prop to reflect only initial load, suppressing the loading indicator during background refetches.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding polling functionality to the integrations table in settings.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch VW-268

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/features/integrations/components/integrations.tsx (1)

78-94: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Fix isInitialLoad in IntegrationsList (dead under Suspense + useSuspenseQuery)

src/features/integrations/components/integrations.tsx computes isInitialLoad = isFetching && !isRefetching, but IntegrationsList is already wrapped in <Suspense fallback={<IntegrationsLoading />}>. With useSuspenseIntegrations based on useSuspenseQuery, the component only renders once the initial fetch is resolved; at that point isPending is effectively false and isRefetching tracks background fetching (isRefetching === isFetching && !isPending), so isInitialLoad stays false. Since DataTable only uses isLoading for the empty-state row, this prop never enables a loading UI.

🔧 Proposed simplification

-  const {
-    data: integrations,
-    isFetching,
-    isRefetching,
-  } = useSuspenseIntegrations(resourceType);
-  const isInitialLoad = isFetching && !isRefetching;
+  const { data: integrations } = useSuspenseIntegrations(resourceType);

   const columns = useMemo(() => {
     return getIntegrationColumns(resourceType);
   }, [resourceType]);

   return (
     <DataTable
       search={<IntegrationsSearch />}
       paginatedData={integrations}
       columns={columns}
-      isLoading={isInitialLoad}
+      isLoading={false}
     />
   );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/integrations/components/integrations.tsx` around lines 78 - 94,
The isInitialLoad calculation is wrong under Suspense/useSuspenseQuery; replace
its usage so DataTable receives the raw fetching state: stop computing
isInitialLoad = isFetching && !isRefetching and instead pass
isLoading={isFetching} (or remove isInitialLoad and use isFetching directly)
from the IntegrationsList component that calls useSuspenseIntegrations; update
references to isInitialLoad in integrations.tsx (the DataTable prop) so the
empty-state row shows while isFetching is true.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/features/integrations/components/integrations.tsx`:
- Around line 78-94: The isInitialLoad calculation is wrong under
Suspense/useSuspenseQuery; replace its usage so DataTable receives the raw
fetching state: stop computing isInitialLoad = isFetching && !isRefetching and
instead pass isLoading={isFetching} (or remove isInitialLoad and use isFetching
directly) from the IntegrationsList component that calls
useSuspenseIntegrations; update references to isInitialLoad in integrations.tsx
(the DataTable prop) so the empty-state row shows while isFetching is true.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e4ec3bb3-b54a-421b-b667-5eb4712ebd61

📥 Commits

Reviewing files that changed from the base of the PR and between f5b4894 and d851eba.

📒 Files selected for processing (3)

• src/config/constants.ts
• src/features/integrations/components/integrations.tsx
• src/features/integrations/hooks/use-integrations.ts