RI-7839: standardize loader behavior in pipeline and analytics pages

[pd-redis]

What

Fix inconsistent loader behavior in RDI pipeline and analytics pages per designer feedback

Before:

Screen.Recording.2025-11-21.at.17.16.01.mov

After:

Screen.Recording.2025-12-08.at.12.13.40.mov

Changes:

• Remove loader from Deploy button (button stays disabled during deploy)
• Test Connection button: show loader only during test action, disable during deploy
• Navigation sidebar: use skeleton loader instead of spinner
• Analytics/Statistics page: migrate from SCSS modules to styled-components, remove backdrop overlay from loader
• Delete unused styles.module.scss

---

Closes #RI-7839

Testing

Pipeline page - Deploy action:

1. Navigate to RDI Pipeline Management page
2. Click Deploy button and confirm
3. Verify only the central config loader appears
4. Verify Deploy, Test Connection buttons are disabled (no individual spinners)

Analytics/Statistics page:

1. Navigate to RDI Statistics page
2. Observe loader during initial page load
3. Verify loader appears centered without backdrop/overlay
4. Verify page renders correctly after data loads

---

Note

Standardizes loaders by removing deploy button spinner, limiting Test Connection spinner to test action, using skeletons in navigation, and refactoring Statistics page to styled-components with a centered non-overlay loader; tests updated accordingly.

• Pipeline Management:
  • DeployPipelineButton: make loading prop optional; remove usage in PipelineActions so deploy button stays disabled without a spinner.
  • Config.tsx: Test Connection button shows loading only during testing (testingConnections) and is disabled during pipeline loading; editor shows loader while pipeline loading.
  • Navigation.tsx: replace spinner with skeleton loader via LoadingContent.
• Statistics Page:
  • Migrate from SCSS modules to styled-components (StatisticsPage.styles.ts), remove styles.module.scss.
  • Centered loader without backdrop overlay; defer sections rendering until pageLoading is false.
  • Minor import/type cleanups.
• Tests:
  • Update expectations for loader behavior and async render waits in Config.spec.tsx and StatisticsPage.spec.tsx.

^{Written by Cursor Bugbot for commit 27086e4. This will update automatically on new commits. Configure here.}

[cursor]

Bug: Empty component renders alongside loader during initial load

The Empty component renders during initial page load alongside the loader because it's not gated by pageLoading. When statisticsResults is null (initial state), shouldShowStatistics returns false, so Empty renders even while pageLoading is true. The statistics content was correctly gated with !pageLoading &&, but the Empty branch wasn't given the same treatment. This creates inconsistent behavior where users see both the loader and empty state simultaneously during initial load.

Additional Locations (1)

• redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.tsx#L136-L137

 

[github-actions]

Code Coverage - Frontend unit tests

St.❔	Category	Percentage	Covered / Total
🟢	Statements	82.85%	21087/25452
🟡	Branches	68.03%	8874/13044
🟡	Functions	78.03%	5780/7407
🟢	Lines	83.25%	20651/24807

Test suite run success

5481 tests passing in 703 suites.

Report generated by 🧪jest coverage report action from 27086e4