feat: Implement Global Loading State with LoadingContext (#1507)

Refactor: Align with Next.js 16 Component Architecture (#1505)

feat: refactor layout for Next.js 16 client/server boundaries

Refactors the root layout to align with Next.js 16's stricter client/server component architecture.

- Creates a new `app/main.tsx` client component to consolidate all client-side providers.
- Simplifies `app/layout.tsx` to a pure server component, responsible only for the root HTML structure and metadata.
- Updates `components/Providers.tsx` to remove redundant theme providers.

This change resolves build failures related to metadata exports from client components and establishes a clear, maintainable pattern for the application's provider hierarchy.

chore: update visual regression snapshots

Updates the Playwright visual regression snapshots to reflect the changes introduced by the architectural refactor.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

refactor: Address PR feedback for LoadingIndicator and theme

This commit addresses the feedback from the pull request review:

-   **`app/layout.tsx`**: Removed the unnecessary comment next to the `Main` component import.
-   **`lib/theme.ts`**:
    -   Added a `loadingIndicator` level to `theme.zIndex`.
    -   Added an `overlay` color to `theme.palette.background`.
    -   Added TypeScript module declarations for the new custom theme properties to ensure type safety.
-   **`components/LoadingIndicator.tsx`**:
    -   Refactored the component to use the new `zIndex` and `backgroundColor` values from the theme.
    -   Implemented a smooth fade-in/fade-out transition using `opacity` and `visibility` properties, making the UX smoother as requested.

fix: Run `lint --fix` to correct formatting

This commit fixes all linting errors reported in the PR feedback.

- Ran `pnpm run lint:fix` to automatically correct Prettier formatting issues across multiple files.
- Manually verified and removed a false-positive `eslint-disable` directive in `hooks/useWorkoutSession.ts`.

All linting checks now pass.

fix: Correct TypeScript errors in theme and remove unused imports

This commit fixes the build failures identified in the PR feedback.

-   **`lib/theme.ts`**:
    -   Corrected the MUI module declaration to properly augment the `TypeBackground` interface, resolving the TypeScript conflict.
    -   Fixed a syntax error in the `shadows` array.
-   **`components/LoadingIndicator.tsx`**:
    -   Removed the unused `React` import, which was causing a build failure.

The application now builds successfully.

fix: Update LoadingIndicator test to reflect new implementation

This commit fixes the failing unit test for the `LoadingIndicator` component.

The test was updated to assert that the progressbar is not present in the DOM when `isLoading` is false, instead of checking for a `null` container. This aligns the test with the component's new behavior of using `opacity` and `visibility` for transitions.

All unit tests are now passing.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

app/main.tsx

@@ -5,24 +5,29 @@ import ErrorBoundary from '@/components/ErrorBoundary'
 import ErrorDisplay from '@/components/ErrorDisplay'
 import ErrorFallback from '@/components/ErrorFallback'
 import Footer from '@/components/Footer'
+import LoadingIndicator from '@/components/LoadingIndicator'
 import Providers from '@/components/Providers'
 import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry'
 import TimerSoundProvider from '@/components/TimerSoundProvider'
 import { ErrorProvider } from '@/context/ErrorContext'
+import { LoadingProvider } from '@/context/LoadingContext'
 import { UserSettingsProvider } from '@/context/UserSettingsContext'
 
 export default function Main({ children }: { children: React.ReactNode }) {
   return (
     <ThemeRegistry options={{ key: 'mui' }}>
       <ErrorProvider>
-        <Providers>
-          <UserSettingsProvider>
-            <ErrorBoundary fallback={<ErrorFallback />}>
-              <TimerSoundProvider>{children}</TimerSoundProvider>
-            </ErrorBoundary>
-          </UserSettingsProvider>
-        </Providers>
-        <ErrorDisplay />
+        <LoadingProvider>
+          <Providers>
+            <UserSettingsProvider>
+              <ErrorBoundary fallback={<ErrorFallback />}>
+                <TimerSoundProvider>{children}</TimerSoundProvider>
+              </ErrorBoundary>
+            </UserSettingsProvider>
+          </Providers>
+          <LoadingIndicator />
+          <ErrorDisplay />
+        </LoadingProvider>
       </ErrorProvider>
       <Footer />
       <BottomNavBar />

components/LoadingIndicator.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useLoading } from '@/context/LoadingContext'
+import { Box, CircularProgress, useTheme } from '@mui/material'
+
+const LoadingIndicator = () => {
+  const { isLoading } = useLoading()
+  const theme = useTheme()
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: theme.palette.background.overlay,
+        zIndex: theme.zIndex.loadingIndicator,
+        transition: theme.transitions.create('opacity', {
+          duration: theme.transitions.duration.short,
+        }),
+        opacity: isLoading ? 1 : 0,
+        visibility: isLoading ? 'visible' : 'hidden',
+      }}
+    >
+      <CircularProgress />
+    </Box>
+  )
+}
+
+export default LoadingIndicator

context/LoadingContext.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from 'react'
+
+interface LoadingContextType {
+  isLoading: boolean
+  setIsLoading: (isLoading: boolean) => void
+}
+
+const LoadingContext = createContext<LoadingContextType | undefined>(undefined)
+
+export const LoadingProvider = ({ children }: { children: ReactNode }) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingContext.Provider>
+  )
+}
+
+export const useLoading = () => {
+  const context = useContext(LoadingContext)
+  if (context === undefined) {
+    throw new Error('useLoading must be used within a LoadingProvider')
+  }
+  return context
+}

lib/theme.ts

@@ -2,6 +2,16 @@
 
 import { createTheme } from '@mui/material/styles'
 
+// Extend the MUI theme types to include custom properties
+declare module '@mui/material/styles' {
+  interface ZIndex {
+    loadingIndicator: number
+  }
+  interface TypeBackground {
+    overlay: string
+  }
+}
+
 /**
  * HRM Application Design System
  *
@@ -52,6 +62,7 @@ const theme = createTheme({
     background: {
       default: '#F5F5F5', // Light grey for main background
       paper: '#FFFFFF',
+      overlay: 'rgba(0, 0, 0, 0.5)', // Added for loading indicator
     },
     // Text colors
     text: {
@@ -162,6 +173,16 @@ const theme = createTheme({
     borderRadius: 8, // 8px rounded corners for cards, buttons
   },
 
+  // zIndex - Consistent layering
+  zIndex: {
+    appBar: 1200,
+    drawer: 1100,
+    modal: 1300,
+    snackbar: 1400,
+    tooltip: 1500,
+    loadingIndicator: 9999, // Added for loading indicator
+  },
+
   // Shadows - Consistent elevation
   shadows: [
     'none',

tests/unit/components/LoadingIndicator.test.tsx

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import LoadingIndicator from '@/components/LoadingIndicator'
+import { useLoading } from '@/context/LoadingContext'
+
+// Mock the useLoading hook
+jest.mock('@/context/LoadingContext', () => ({
+  useLoading: jest.fn(),
+}))
+
+const useLoadingMock = useLoading as jest.Mock
+
+describe('LoadingIndicator', () => {
+  it('should not render the progressbar when isLoading is false', () => {
+    useLoadingMock.mockReturnValue({ isLoading: false })
+    render(<LoadingIndicator />)
+    // The component is always in the DOM, but its visibility is toggled.
+    // We check that the progressbar role is not in the document.
+    expect(screen.queryByRole('progressbar')).toBeNull()
+  })
+
+  it('should be visible when isLoading is true', () => {
+    useLoadingMock.mockReturnValue({ isLoading: true })
+    render(<LoadingIndicator />)
+    expect(screen.getByRole('progressbar')).toBeVisible()
+  })
+})

tests/unit/context/LoadingContext.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, act } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { LoadingProvider, useLoading } from '@/context/LoadingContext'
+import { Button } from '@mui/material'
+
+const TestComponent = () => {
+  const { isLoading, setIsLoading } = useLoading()
+  return (
+    <div>
+      <span data-testid="loading-state">
+        {isLoading ? 'Loading' : 'Not Loading'}
+      </span>
+      <Button onClick={() => setIsLoading(true)}>Start Loading</Button>
+      <Button onClick={() => setIsLoading(false)}>Stop Loading</Button>
+    </div>
+  )
+}
+
+describe('LoadingProvider', () => {
+  it('should provide the initial loading state as false', () => {
+    render(
+      <LoadingProvider>
+        <TestComponent />
+      </LoadingProvider>
+    )
+    expect(screen.getByTestId('loading-state')).toHaveTextContent('Not Loading')
+  })
+
+  it('should allow consumers to update the loading state', () => {
+    render(
+      <LoadingProvider>
+        <TestComponent />
+      </LoadingProvider>
+    )
+
+    act(() => {
+      screen.getByText('Start Loading').click()
+    })
+
+    expect(screen.getByTestId('loading-state')).toHaveTextContent('Loading')
+
+    act(() => {
+      screen.getByText('Stop Loading').click()
+    })
+
+    expect(screen.getByTestId('loading-state')).toHaveTextContent('Not Loading')
+  })
+})