feat: add loading indicator between view pages transition

[adityathebe]

Summary by CodeRabbit

• New Features
  • Added a semi-transparent loading overlay with spinner that displays during data transitions, providing clearer visual feedback when switching between different views.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
aws-preview	Ready	Preview	Mar 20, 2026 5:28am
flanksource-ui	Ready	Preview	Mar 20, 2026 5:28am

[coderabbitai]

Walkthrough

The changes add a transition overlay feature to the view container. The useViewData hook now exposes React Query's isPreviousData state, and ViewContainer uses this alongside isFetching to conditionally display a semi-transparent loading spinner overlay when fetching updated data.

Changes

Cohort / File(s)	Summary
Data Fetching Hook src/pages/views/hooks/useViewData.ts	Exposes React Query's isPreviousData boolean field through the UseViewDataResult interface, allowing consumers to detect when previous cached data is displayed during refetches.
View Container Component src/pages/views/components/ViewContainer.tsx	Derives isPreviousData from useViewData and conditionally renders a centered semi-transparent loading spinner overlay when both fetching and previous data are present. Wraps content in a positioned container with overflow clipping.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature: adding a loading indicator overlay during view page transitions, which matches the changes in ViewContainer that conditionally show a semi-transparent loading spinner during data fetches.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/view-transition-loading-screen

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch feat/view-transition-loading-screen

---

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]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/views/components/ViewContainer.tsx`:
- Around line 121-123: The wrapper div in ViewContainer uses "overflow-hidden"
which can clip inline-rendered chart tooltips; confirm whether
ChartTooltipContent tooltips overflow in your UI and, if they do, update
ChartTooltipContent to render its tooltip into document.body via the same portal
pattern used by MultiSelectDropdown, TristateReactSelect, and Tooltip (i.e.,
create a portal root and mount the tooltip DOM there) so chart tooltips are not
clipped while keeping the wrapper's overflow-hidden intact.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8bcdfd74-7b97-4169-acf7-7302029007f4

📥 Commits

Reviewing files that changed from the base of the PR and between c27d7ed and cb69203.

📒 Files selected for processing (2)

• src/pages/views/components/ViewContainer.tsx
• src/pages/views/hooks/useViewData.ts