Blazor.FlexLoader 1.6.1

Blazor.FlexLoader

<div align="center"> <img src="./assets/icon-github.svg" alt="Blazor.FlexLoader" width="128" height="128" /> <h3>Un composant Blazor flexible pour les indicateurs de chargement</h3> </div>

Francais | English

Francais

Un composant Blazor flexible et reutilisable pour afficher des indicateurs de chargement avec support pour des images personnalisees, du texte et du contenu custom. Inclut un SVG anime par defaut !

Fonctionnalites

• SVG anime par defaut - Aucune configuration requise !
• Interception automatique HTTP - Affiche le loader pendant les requetes HTTP
• Retry automatique - Reessaie les requetes echouees jusqu'a 3 fois
• Exponential backoff - D�lai intelligent entre les tentatives
• Configuration avanc�e - Options personnalisables pour le retry et l'interception
• Logging int�gr� - Tra�abilit� compl�te avec ILogger
• Filtrage conditionnel - Intercepte uniquement certaines routes ou m�thodes
• Indicateur de chargement global pour les applications Blazor
• Support d'images personnalisees (GIF, SVG, PNG, etc.)
• Texte de chargement personnalisable
• Contenu custom avec RenderFragment
• Positionnement absolu ou fixe
• Couleurs et styles personnalisables
• Fermeture automatique configurable
• Fermeture au clic sur l'overlay
• Compatible .NET 9
• CI/CD automatise avec GitHub Actions

Installation

dotnet add package Blazor.FlexLoader

Configuration

Option 1: Configuration basique

1. Enregistrer le service dans Program.cs

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoader();

2. Ajouter les imports dans _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Ajouter le composant dans votre layout

<FlexLoader />

C'est tout ! Le loader affichera automatiquement un SVG anime professionnel.

Option 2: Configuration avec interception HTTP (Recommande)

1. Enregistrer les services avec interception HTTP dans Program.cs

using Blazor.FlexLoader.Extensions;

// Configure le loader avec interception automatique des requetes HTTP
builder.Services.AddBlazorFlexLoaderWithHttpInterceptor(client =>
{
 client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
    // Autres configurations du HttpClient...
});

2. Ajouter les imports dans _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Ajouter le composant dans votre layout

<FlexLoader />

Avantages:

• ? Le loader s'affiche automatiquement pendant toutes les requetes HTTP
• ? Retry automatique (3 tentatives) en cas d'erreur HTTP 500 ou HttpRequestException
• ? Pas besoin d'appeler manuellement Show() et Close()
• ? Gestion centralisee des erreurs reseau

Option 3: Configuration avanc�e avec options personnalis�es ??

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoaderWithHttpInterceptor(
    client =>
    {
        client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
        client.Timeout = TimeSpan.FromSeconds(30);
    },
    options =>
    {
        // Retry avec exponential backoff
        options.MaxRetryAttempts = 5;
        options.UseExponentialBackoff = true;  // 1s, 2s, 4s, 8s, 16s...
        options.RetryDelay = TimeSpan.FromSeconds(1);
        
        // Intercepte uniquement les routes API
        options.InterceptPredicate = request => 
    request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;
        
        // Affiche le loader uniquement pour les mutations
        options.ShowLoaderPredicate = request => 
          request.Method != HttpMethod.Get;
        
   // Callback avant chaque retry
        options.OnRetry = async (attempt, exception, delay) =>
   {
      Console.WriteLine($"Tentative {attempt} apr�s {delay.TotalSeconds}s");
        };
        
 // Active le logging d�taill� en d�veloppement
     options.EnableDetailedLogging = builder.Environment.IsDevelopment();
    });

?? Voir la documentation compl�te des options

Utilisation

Avec interception HTTP (Automatique)

@inject IHttpClientFactory HttpClientFactory

<button @onclick="FetchData">Charger les donnees</button>

@code {
  private async Task FetchData()
    {
        // Le loader s'affiche automatiquement !
  var client = HttpClientFactory.CreateClient("BlazorFlexLoader");
        var response = await client.GetAsync("/api/data");
        
    // Le loader se masque automatiquement a la fin
        // Retry automatique en cas d'erreur !
    }
}

Methodes manuelles Show/Close

@inject LoaderService LoaderService

<button @onclick="ShowLoader">Afficher le loader</button>

@code {
    private async Task ShowLoader()
  {
        LoaderService.Show(); // Affiche le SVG anime par defaut
   
        try
        {
            await SomeAsyncOperation();
        }
  finally
  {
      LoaderService.Close(); // Masque le loader
     }
    }
}

Loader par defaut vs personnalise

<FlexLoader />


<FlexLoader ImagePath="/images/custom-loader.gif" />


<FlexLoader>
    <CustomContent>
        <div class="spinner-border" role="status"></div>
    </CustomContent>
</FlexLoader>

Methodes Increment/Decrement (gestion avancee)

LoaderService.Increment(); // Compter +1
LoaderService.Decrement(); // Compter -1
LoaderService.Reset();     // Forcer fermeture

Parametres du composant

API du LoaderService

public class LoaderService
{
    public bool IsLoading { get; }
    
    // Methodes simples
    public void Show();       // Afficher
    public void Close();      // Masquer
    
    // Methodes avancees
    public void Increment();  // Compter +1
    public void Decrement();  // Compter -1
    public void Reset();      // Forcer fermeture
    
    public event EventHandler? OnChange;
}

API des Extensions

// Configuration basique
services.AddBlazorFlexLoader();

// Configuration avec interception HTTP (options par d�faut)
services.AddBlazorFlexLoaderWithHttpInterceptor(client =>
{
    client.BaseAddress = new Uri("https://api.example.com");
    client.Timeout = TimeSpan.FromSeconds(30);
});

// Configuration avec interception HTTP + options personnalis�es ??
services.AddBlazorFlexLoaderWithHttpInterceptor(
    client =>
    {
        client.BaseAddress = new Uri("https://api.example.com");
    },
    options =>
  {
   options.MaxRetryAttempts = 5;
        options.UseExponentialBackoff = true;
      options.RetryDelay = TimeSpan.FromSeconds(2);
 options.RetryOnStatusCodes = new HashSet<HttpStatusCode>
  {
        HttpStatusCode.InternalServerError,
    HttpStatusCode.BadGateway,
      HttpStatusCode.ServiceUnavailable
        };
        options.InterceptPredicate = request => 
            request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;
    });

Options de configuration avanc�es ??

Fonctionnement de l'intercepteur HTTP

L'HttpCallInterceptorHandler intercepte automatiquement toutes les requetes HTTP et:

1. Affiche le loader au debut de chaque requete (filtrable avec ShowLoaderPredicate)
2. Masque le loader a la fin (succes ou echec)
3. Reessaie automatiquement selon la configuration :
   • Codes HTTP configurables (d�faut: 500, 502, 503, 504, 408)
   • HttpRequestException (probleme reseau)
   • Timeouts (si RetryOnTimeout = true)
4. Clone les requetes pour permettre les retries multiples
5. Log les �v�nements avec ILogger (optionnel)
6. Applique exponential backoff pour �viter la surcharge (si activ�)

Logging ??

Le handler utilise ILogger<HttpCallInterceptorHandler> automatiquement si disponible :

// Dans Program.cs
builder.Logging.AddConsole();
builder.Logging.SetMinimumLevel(LogLevel.Information);

**Logs g�n�r�s 😗*

• LogInformation : D�but/fin de requ�te avec dur�e
• LogWarning : Tentatives de retry
• LogError : �checs apr�s toutes les tentatives
• LogDebug : D�tails techniques (si EnableDetailedLogging = true)

Exemples pratiques

N'intercepter que les appels API

options.InterceptPredicate = request => 
    request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;

Loader uniquement pour les mutations (POST/PUT/DELETE)

options.ShowLoaderPredicate = request => 
    request.Method == HttpMethod.Post ||
    request.Method == HttpMethod.Put ||
    request.Method == HttpMethod.Delete;

Notification avant chaque retry

@inject INotificationService Notifications

options.OnRetry = async (attempt, exception, delay) =>
{
    await Notifications.ShowWarning($"Tentative {attempt}...");
};

Licence

MIT

English

A flexible and reusable Blazor component for displaying loading indicators with support for custom images, text, and custom content. Includes animated SVG by default!

Features

• Built-in animated SVG - Zero configuration required!
• Automatic HTTP interception - Shows loader during HTTP requests
• Automatic retry - Retries failed requests up to 3 times
• Exponential backoff - Smart delay between retry attempts
• Advanced configuration - Customizable options for retry and interception
• Integrated logging - Full traceability with ILogger
• Conditional filtering - Intercept only specific routes or methods
• Global loading indicator for Blazor applications
• Support for custom images (GIF, SVG, PNG, etc.)
• Customizable loading text
• Custom content with RenderFragment
• Absolute or fixed positioning
• Customizable colors and styles
• Configurable auto-close
• Close on overlay click
• Compatible with .NET 9
• Automated CI/CD with GitHub Actions

Installation

dotnet add package Blazor.FlexLoader

Setup

Option 1: Basic Setup

1. Register the service in Program.cs

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoader();

2. Add imports in _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Add the component to your layout

<FlexLoader />

That's it! The loader will automatically display a professional animated SVG.

Option 2: Setup with HTTP Interception (Recommended)

1. Register services with HTTP interception in Program.cs

using Blazor.FlexLoader.Extensions;

// Configure the loader with automatic HTTP request interception
builder.Services.AddBlazorFlexLoaderWithHttpInterceptor(client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
    // Other HttpClient configurations...
});

2. Add imports in _Imports.razor

@using Blazor.FlexLoader.Components
@using Blazor.FlexLoader.Services

3. Add the component to your layout

<FlexLoader />

Benefits:

• ? Loader displays automatically during all HTTP requests
• ? Automatic retry (3 attempts) on HTTP 500 errors or HttpRequestException
• ? No need to manually call Show() and Close()
• ? Centralized network error handling

Option 3: Advanced Setup with Custom Options ??

using Blazor.FlexLoader.Extensions;

builder.Services.AddBlazorFlexLoaderWithHttpInterceptor(
    client =>
    {
        client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
 client.Timeout = TimeSpan.FromSeconds(30);
    },
    options =>
    {
   // Retry with exponential backoff
        options.MaxRetryAttempts = 5;
      options.UseExponentialBackoff = true;  // 1s, 2s, 4s, 8s, 16s...
  options.RetryDelay = TimeSpan.FromSeconds(1);
        
        // Intercept only API routes
        options.InterceptPredicate = request => 
        request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;
        
        // Show loader only for mutations
        options.ShowLoaderPredicate = request => 
   request.Method != HttpMethod.Get;
        
    // Callback before each retry
        options.OnRetry = async (attempt, exception, delay) =>
        {
            Console.WriteLine($"Retry attempt {attempt} after {delay.TotalSeconds}s");
        };
        
// Enable detailed logging in development
        options.EnableDetailedLogging = builder.Environment.IsDevelopment();
    });

?? See full options documentation

Usage

With HTTP Interception (Automatic)

@inject IHttpClientFactory HttpClientFactory

<button @onclick="FetchData">Load data</button>

@code {
    private async Task FetchData()
    {
        // Loader displays automatically!
   var client = HttpClientFactory.CreateClient("BlazorFlexLoader");
        var response = await client.GetAsync("/api/data");
        
        // Loader hides automatically when done
 // Automatic retry on errors!
    }
}

Manual Show/Close methods

@inject LoaderService LoaderService

<button @onclick="ShowLoader">Show loader</button>

@code {
    private async Task ShowLoader()
    {
   LoaderService.Show(); // Shows the default animated SVG
      
   try
      {
 await SomeAsyncOperation();
        }
    finally
        {
            LoaderService.Close(); // Hide the loader
        }
    }
}

Loader par defaut vs personnalise

<FlexLoader />


<FlexLoader ImagePath="/images/custom-loader.gif" />


<FlexLoader>
    <CustomContent>
        <div class="spinner-border" role="status"></div>
    </CustomContent>
</FlexLoader>

Methodes Increment/Decrement (gestion avancee)

LoaderService.Increment(); // Compter +1
LoaderService.Decrement(); // Compter -1
LoaderService.Reset();     // Forcer fermeture

Parametres du composant

API du LoaderService

public class LoaderService
{
    public bool IsLoading { get; }
    
    // Methodes simples
    public void Show();       // Afficher
    public void Close();      // Masquer
    
    // Methodes avancees
    public void Increment();  // Compter +1
    public void Decrement();  // Compter -1
    public void Reset();      // Forcer fermeture
    
    public event EventHandler? OnChange;
}

API des Extensions

// Basic configuration
services.AddBlazorFlexLoader();

// HTTP interception with default options
services.AddBlazorFlexLoaderWithHttpInterceptor(client =>
{
 client.BaseAddress = new Uri("https://api.example.com");
    client.Timeout = TimeSpan.FromSeconds(30);
});

// HTTP interception with custom options ??
services.AddBlazorFlexLoaderWithHttpInterceptor(
    client =>
    {
        client.BaseAddress = new Uri("https://api.example.com");
    },
    options =>
  {
   options.MaxRetryAttempts = 5;
        options.UseExponentialBackoff = true;
      options.RetryDelay = TimeSpan.FromSeconds(2);
 options.RetryOnStatusCodes = new HashSet<HttpStatusCode>
  {
        HttpStatusCode.InternalServerError,
    HttpStatusCode.BadGateway,
      HttpStatusCode.ServiceUnavailable
        };
        options.InterceptPredicate = request => 
            request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;
    });

Advanced Configuration Options ??

How HTTP Interceptor Works

The HttpCallInterceptorHandler automatically intercepts all HTTP requests and:

1. Shows the loader at the start of each request (filterable with ShowLoaderPredicate)
2. Hides the loader at the end (success or failure)
3. Automatically retries according to configuration:
   • Configurable HTTP codes (default: 500, 502, 503, 504, 408)
   • HttpRequestException (network issues)
   • Timeouts (if RetryOnTimeout = true)
4. Clones requests to allow multiple retries
5. Logs events with ILogger (optional)
6. Applies exponential backoff to avoid overload (if enabled)

Logging ??

The handler uses ILogger<HttpCallInterceptorHandler> automatically if available:

// In Program.cs
builder.Logging.AddConsole();
builder.Logging.SetMinimumLevel(LogLevel.Information);

Generated logs:

• LogInformation: Request start/end with duration
• LogWarning: Retry attempts
• LogError: Failures after all attempts
• LogDebug: Technical details (if EnableDetailedLogging = true)

Practical Examples

Intercept only API calls

options.InterceptPredicate = request => 
 request.RequestUri?.AbsolutePath.StartsWith("/api/") ?? false;

Loader only for mutations (POST/PUT/DELETE)

options.ShowLoaderPredicate = request => 
    request.Method == HttpMethod.Post ||
    request.Method == HttpMethod.Put ||
    request.Method == HttpMethod.Delete;

Notification before each retry

@inject INotificationService Notifications

options.OnRetry = async (attempt, exception, delay) =>
{
    await Notifications.ShowWarning($"Tentative {attempt}...");
};

License

MIT