Extract page spinner

[alexandrudanpop]

Part of OPS-3144

[Copilot]

Pull request overview

This PR extracts a reusable FullPageSpinner component to eliminate code duplication across the application. The component encapsulates the full-page loading spinner pattern that was previously repeated inline in multiple locations.

Key changes:

• Created a new FullPageSpinner component with configurable size
• Replaced five instances of inline full-page spinner implementations with the new component
• Reorganized imports to maintain alphabetical ordering

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react-ui/src/app/common/components/full-page-spinner.tsx	New reusable component that wraps LoadingSpinner with full-page layout styling
packages/react-ui/src/app/app-bootstrap.tsx	Replaced inline spinner with FullPageSpinner component
packages/react-ui/src/app/common/guards/allow-logged-in-user-only-guard.tsx	Replaced inline spinner in Suspense fallback with FullPageSpinner component
packages/react-ui/src/app/common/guards/intial-data-guard.tsx	Replaced two inline spinner instances with FullPageSpinner component
packages/react-ui/src/app/routes/flows/id/index.tsx	Replaced inline spinner with FullPageSpinner component and alphabetized imports
packages/react-ui/src/app/routes/runs/id/index.tsx	Replaced inline spinner with FullPageSpinner component

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[linear]

OPS-3144 Add federated bootstrap logic

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[greptile-apps]

Greptile Overview

Greptile Summary

Extracted a reusable FullPageSpinner component to consolidate duplicate full-page loading spinner code across the application. The refactoring replaced 6 inline spinner implementations with a single component, improving code maintainability and consistency.

• Centralized full-page spinner UI in packages/react-ui/src/app/common/components/full-page-spinner.tsx
• Updated all instances in bootstrap, guards, and route files to use the new component
• Standardized bg-background styling across all full-page loading states for visual consistency

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Clean refactoring that extracts duplicate code into a reusable component without changing core functionality. The changes follow established patterns, maintain type safety, and improve code maintainability.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-ui/src/app/common/components/full-page-spinner.tsx	5/5	New reusable component created to consolidate full-page loading spinner UI
packages/react-ui/src/app/app-bootstrap.tsx	4/5	Replaced inline spinner with FullPageSpinner component, adds bg-background class that wasn't present before
packages/react-ui/src/app/common/guards/allow-logged-in-user-only-guard.tsx	4/5	Replaced inline spinner with FullPageSpinner component, adds bg-background class that wasn't present before

Sequence Diagram

sequenceDiagram
    participant User
    participant AppBootstrap
    participant Guards as Guards (Auth & Data)
    participant Routes as Route Pages
    participant FullPageSpinner
    participant LoadingSpinner

    User->>AppBootstrap: Access application
    AppBootstrap->>AppBootstrap: Initialize flags & internal setup
    AppBootstrap->>FullPageSpinner: Render while bootstrapping
    FullPageSpinner->>LoadingSpinner: Display spinner
    AppBootstrap->>Guards: Bootstrap complete, pass to guards
    
    Guards->>Guards: Setup interceptors & auth checks
    Guards->>FullPageSpinner: Render while loading
    FullPageSpinner->>LoadingSpinner: Display spinner
    Guards->>Routes: Guards pass, route to page
    
    Routes->>Routes: Fetch flow/run data
    Routes->>FullPageSpinner: Render while loading
    FullPageSpinner->>LoadingSpinner: Display spinner
    Routes->>User: Display content when ready

Loading

[greptile-apps]

_{6 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}