Skip to content

Latest commit

 

History

History
120 lines (100 loc) · 4.12 KB

LOADING_SPINNER_IMPLEMENTATION.md

File metadata and controls

120 lines (100 loc) · 4.12 KB

Loading Spinner Implementation

Overview

Added React loading spinners to all dropdown elements in the OpenShift ImageSetConfiguration Generator application to provide visual feedback when the application is waiting for API responses.

Changes Made

1. Created LoadingSpinner Component

  • File: frontend/src/components/LoadingSpinner.js
  • Purpose: Reusable spinner component with configurable size and positioning
  • Features:
    • Sizes: small (16px), medium (24px), large (32px)
    • Inline positioning option for labels
    • CSS animations with rotating border effect

2. LoadingSpinner CSS Styles

  • File: frontend/src/components/LoadingSpinner.css
  • Purpose: Styling for the spinner with smooth rotation animation
  • Features:
    • Responsive sizing based on component props
    • Smooth 1-second rotation animation
    • Blue accent color matching application theme

3. Enhanced App.js with Loading States

  • File: frontend/src/App.js
  • Changes:
    • Added isLoadingReleases state for OCP releases API calls
    • Added isLoadingChannels state for OCP channels API calls
    • Updated fetchChannelsForVersion to track loading state
    • Updated loadOcpReleases to track loading state
    • Pass loading states to BasicConfig component

4. Updated BasicConfig Component

  • File: frontend/src/components/BasicConfig.js
  • Changes:
    • Import LoadingSpinner component
    • Added loading spinners to all dropdown labels when respective API calls are in progress
    • Updated dropdown disabled states to include loading conditions
    • Enhanced help text to show loading status for channels
    • Improved user experience with contextual loading messages

5. Enhanced PreviewGenerate Component

  • File: frontend/src/components/PreviewGenerate.js
  • Changes:
    • Import LoadingSpinner component
    • Replaced generic loading text with actual spinner component
    • Better visual feedback during YAML generation

User Experience Improvements

Dropdown Loading States

  1. OCP Releases Dropdown:

    • Shows spinner in label while fetching releases from oc-mirror
    • Dropdown disabled during loading
    • Loading message in dropdown option

  2. OCP Channels Dropdown:

    • Shows spinner in label while fetching version-specific channels
    • Dropdown disabled during loading
    • Contextual help text showing loading progress

  3. Generate Preview Button:

    • Shows inline spinner during YAML generation
    • Clear visual feedback with spinner and text

Loading Scenarios Covered

  • Initial App Load: Spinner shown while fetching OCP releases
  • Version Selection: Spinner shown while fetching channels for selected version
  • Configuration Generation: Spinner shown during YAML preview generation
  • Error States: Graceful fallback with appropriate messaging

Technical Implementation

Loading State Management

const [isLoadingReleases, setIsLoadingReleases] = useState(false);
const [isLoadingChannels, setIsLoadingChannels] = useState(false);

Spinner Usage Patterns

// In labels with inline spinner
<label htmlFor="dropdown">
  Label Text
  {isLoading && <LoadingSpinner size="small" inline />}
</label>

// In buttons
{isGenerating ? (
  <>
    <LoadingSpinner size="small" inline />
    Generating...
  </>
) : (
  'Generate Preview'
)}

Conditional Disabling

disabled={isLoadingReleases || !hasRequiredData()}

API Integration Points

  • /api/versions - OCP releases fetching with loading state
  • /api/channels/<version> - Version-specific channels with loading state
  • /api/generate/preview - YAML generation with loading state

Testing Verification

  1. ✅ Loading spinners appear during API calls
  2. ✅ Dropdowns are disabled during loading
  3. ✅ Contextual loading messages are displayed
  4. ✅ Error states gracefully handle failed API calls
  5. ✅ Loading states clear properly after completion

Future Enhancements

  • Add timeout indicators for long-running operations
  • Implement progress bars for file uploads/downloads
  • Add skeleton loaders for complex UI components
  • Consider adding global loading state for app-wide operations