AuthLoadingManager - Loading State Management

Documentation for AuthLoadingManager, the loading state management system for authentication operations in the Now.js Framework

📋 Table of Contents

1. Overview
2. Installation and Import
3. Getting Started
4. Loading Events
5. API Reference

Overview

AuthLoadingManager manages loading states for authentication operations, providing feedback to users during operations.

Key Features

• ✅ Operation Tracking: Track loading state for each operation
• ✅ Loading UI: Display loading indicators automatically
• ✅ Progress Tracking: Track progress (percentage)
• ✅ Multiple Indicators: Support multiple types (spinner, progress bar, skeleton)
• ✅ Custom Messages: Configure loading messages
• ✅ Timeout Handling: Handle long-running operations
• ✅ Overlay Support: Full-screen loading overlay
• ✅ Cancel Support: Cancel operations
• ✅ Event System: Events for loading state changes
• ✅ Auto Cleanup: Automatically clean up loading states

When to Use AuthLoadingManager

✅ Use AuthLoadingManager when:

• Need to show loading feedback during authentication
• Need to track operation progress
• Want consistent loading UX
• Need to handle loading timeouts

❌ Don't use when:

• Operations complete very quickly (< 100ms)
• Don't need loading UI

Installation and Import

AuthLoadingManager is loaded with the Now.js Framework and is ready to use immediately via the window object:

// No import needed - ready to use immediately
console.log(window.AuthLoadingManager); // AuthLoadingManager object

Getting Started

Basic Setup

// AuthLoadingManager works automatically with AuthManager
// No separate initialization needed

await AuthManager.init({
  enabled: true,

  // Loading configuration
  loading: {
    // Show loading indicators
    enabled: true,

    // Minimum loading time (prevent flicker)
    minDuration: 300,

    // Loading timeout (ms)
    timeout: 30000,

    // Default loading message
    defaultMessage: 'Loading...',

    // Loading indicator type
    indicator: 'spinner',  // spinner, progress, skeleton, overlay

    // Show overlay
    overlay: true,

    // Overlay opacity
    overlayOpacity: 0.5
  }
});

console.log('AuthLoadingManager initialized!');

Loading Flow

Operation starts
      ↓
┌─────────────────────┐
│  Start Loading      │
│  - Show indicator   │
│  - Emit event       │
└─────────┬───────────┘
          ↓
┌─────────────────────┐
│  Operation Running  │
│  - Update progress  │
│  - Show messages    │
└─────────┬───────────┘
          ↓
┌─────────────────────┐
│  Check Timeout      │
│  - Cancel if needed │
│  - Show warning     │
└─────────┬───────────┘
          ↓
┌─────────────────────┐
│  Operation Complete │
│  - Hide indicator   │
│  - Emit event       │
│  - Cleanup          │
└─────────────────────┘

Loading Events

Available Events

// AuthLoadingManager sends its events through EventManager.emit(), which does
// not dispatch a DOM event — listen with EventManager.on(), not addEventListener().

// 1. Operation started
EventManager.on('auth:loading:start', (data) => {
  const {operation, globalLoading, activeOperations} = data;
  console.log(`Loading started: ${operation.type} (${operation.id})`);
});

// 2. Operation updated
EventManager.on('auth:loading:update', (data) => {
  const {operation} = data;
  console.log(`Loading updated: ${operation.type}`);
});

// 3. Operation completed
EventManager.on('auth:loading:complete', (data) => {
  const {operation} = data;
  console.log(`Loading finished: ${operation.type} (${operation.duration}ms)`);
});

Every payload carries the same three keys:

API Reference

Methods

startLoading(operation, options)

Start tracking loading state for an operation

Parameters:

• operation (string) - Operation identifier
• options (Object) - Loading options

Returns: string - Operation ID

Example:

const id = AuthLoadingManager.startLoading('login', {
  message: 'Logging in...',
  indicator: 'spinner',
  overlay: true
});

cancelLoading(operationId, reason?)

Cancel an operation

Parameters:

• operationId (string) - Operation ID

Returns: void

Example:

AuthLoadingManager.cancelLoading(operationId, reason?);

isLoading(operation)

Check if operation is loading

Parameters:

• operation (string) - Operation identifier

Returns: boolean

Example:

if (AuthLoadingManager.isLoading('login')) {
  console.log('Login in progress');
}

Related Documentation

• Authentication.md - Authentication system overview
• AuthManager.md - Core authentication manager
• AuthGuard.md - Route protection
• AuthErrorHandler.md - Error handling
• TokenService.md - JWT token management