Conditional Loading Overlay for XHR

Overview

Tired of your loading overlay appearing for every minor background AJAX request? This component provides a smart, non-intrusive way to show a full-screen loading overlay only for significant user-initiated actions.

Instead of showing a loader for everything, you can now precisely control when the overlay appears, leading to a cleaner and less disruptive user experience. This component uses a lightweight JavaScript interceptor to watch for XHR requests initiated from elements marked with a specific CSS class.

Why Use This Component?

• Better UX: Avoids confusing users with a full-screen loader for small, background data refreshes.
• Precise Control: You decide which user actions are important enough to block the UI.
• Simple Implementation: Add it once to your layout, and it works globally across your application.
• Non-Intrusive: No need to modify the logic of your buttons or server actions. Just add a CSS class.

How to Use

Step 1: Install the Component

Install this component from the OutSystems Forge into your environment.

Step 2: Add the Overlay to Your Layout

Step 3: Trigger the Overlay on Buttons

In the Properties pane, find the Style Classes property. Add the following class name: trigger-loading.

Modified from: XHR Loading Overlay - Overview (O11) | OutSystems