fix(dashboard): prevent layout shift when loading spinner mounts in Models view

[weselben]

Description

The Models view's loading pill was position: sticky, so it pushed the
table down by roughly its own height when it mounted and pulled it back
when it unmounted. Switching to position: fixed removes it from layout
flow; offsets mirror the flash-region pattern (z-index: 110 vs flash
toasts' 120, sidebar width 240 px / 60 px when collapsed) so the pill
sits centered above the table without intercepting clicks. Verified
manually against a fresh local deployment stack (gateway + Postgres +
Valkey + Qdrant): the dashboard loads, the Models view renders the fixed
pill, and no layout shift occurs.

Before:

After

AI Generated

Drafted and reviewed with AI assistance. Review covered the rendering
path (ModelsPage / LoadingState), stacking and positioning math
against the flash-region precedent, the mobile and collapsed-sidebar
breakpoints, and source/dist consistency. Two issues found during
review were fixed before opening: an invalid Svelte :global(...)
selector in the plain global stylesheet (dropped by browsers, making
the collapsed-sidebar override a no-op) and a scoped min-height that
out-specified the pill's compact-height override (now routed through a
--loading-state-min-height custom property). The embedded dashboard
bundle was rebuilt and is byte-identical to a fresh build of the
sources.

Generated with creating-pull-requests Skill

Summary by CodeRabbit

• Bug Fixes
  • Improved loading-state placement with a centered overlay in the main content area.
  • Loading indicators now remain properly positioned on mobile layouts and with collapsed sidebars.
  • Overlays no longer block clicks on underlying content.
• Style
  • Added support for customizing loading-state minimum height through modifier styles, with a 64px default.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 9da29afd-0689-4071-87c6-b4ecdb309a0f

📥 Commits

Reviewing files that changed from the base of the PR and between 0257736 and 9680be2.

📒 Files selected for processing (1)

• web/dashboard/src/styles/page-globals.css

---

📝 Walkthrough

Walkthrough

The loading state now accepts a minimum-height override through a CSS custom property. The models loading state uses a fixed, click-through overlay with responsive positioning for sidebar layouts.

Changes

Loading state overlay

Layer / File(s)	Summary
Loading state sizing web/dashboard/src/lib/components/molecules/LoadingState.svelte	The default minimum height uses --loading-state-min-height with a 64px fallback.
Overlay positioning web/dashboard/src/styles/page-globals.css	The models loading state uses fixed positioning, click-through behavior, compact styling, higher stacking order, and responsive sidebar offsets.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ENTERPILOT/GoModel#569: Changes the dashboard’s .models-loading-state loading UI and positioning behavior.

Suggested reviewers: santiagodepolonia

Poem

A rabbit hops where loaders glow,
With custom heights set just so.
The overlay floats, clicks pass through,
Sidebar offsets keep it true.
“Neat and tidy!” says the hare.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the dashboard fix that prevents layout shift when the Models view loading spinner mounts.
Description check	✅ Passed	The description explains the cause, implementation, verification, and optional AI-generated review context using the required sections.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@web/dashboard/src/styles/page-globals.css`:
- Line 258: Insert an empty line immediately before the padding declaration at
the indicated CSS rule to satisfy Stylelint’s declaration-empty-line-before
requirement, without changing the declaration or surrounding styles.

🪄 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: ASSERTIVE

Plan: Pro Plus

Run ID: 5e4c6db2-376d-4cd7-ac59-762ad489a02e

📥 Commits

Reviewing files that changed from the base of the PR and between 0dbd18c and 0257736.

⛔ Files ignored due to path filters (4)

• internal/admin/dashboard/static/dist/assets/index-B-Rv4AUL.js is excluded by !**/dist/**
• internal/admin/dashboard/static/dist/assets/index-DStc32IL.css is excluded by !**/dist/**
• internal/admin/dashboard/static/dist/assets/index-Dv37Tmj5.css is excluded by !**/dist/**
• internal/admin/dashboard/static/dist/index.html is excluded by !**/dist/**

📒 Files selected for processing (2)

• web/dashboard/src/lib/components/molecules/LoadingState.svelte
• web/dashboard/src/styles/page-globals.css

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[greptile-apps]

Confidence Score: 5/5

Safe to merge based on the reviewed loading-state behavior.

The final defect set is empty. Browser measurements confirmed the loading pill uses fixed positioning, honors the desktop and mobile sidebar offsets, does not intercept pointer input, and contributes no layout height.

Files Needing Attention: No files need follow-up changes.

T-Rex Logs

What T-Rex did

• Executed the models-loading layout check script under /home/user/repo using Chromium/Playwright.
• The test fixture read the dashboard CSS and measured the overlay across desktop and mobile viewports, confirming the overlay is fixed, centered, pointer-transparent, and does not contribute to document layout.
• The observed command output showed exit code 0 and all assertions passing.
• Reviewed the before and after videos demonstrating the overlay's fixed, centered, and click-through state across expanded, collapsed, and mobile layouts.

_{Ran code and verified through T-Rex}

_{Reviews (1): Last reviewed commit: "fix(dashboard): prevent layout shift whe..." | Re-trigger Greptile}

[SantiagoDePolonia]

LGTM