Show a Loading Spinner with UI Blur During Long-Running Actions

When performing long-running actions in a NetSuite Suitelet or Client Script — such as generating files, calling APIs, or triggering downloads — it’s good practice to show a loading indicator and block the UI to avoid user interaction.

Here’s a reusable snippet that creates a full-screen blur overlay and centered loading GIF (spinner).

Why Use This Pattern?

• Prevents users from clicking buttons multiple times
• Clearly communicates that processing is happening
• Looks professional and improves UX

Code Snippet: Add Overlay + Spinner

// Create semi-transparent blur overlay
let overlay = document.createElement('div');
overlay.id = 'loadingOverlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100vw';
overlay.style.height = '100vh';
overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
overlay.style.zIndex = '999';
overlay.style.backdropFilter = 'blur(4px)';
document.body.appendChild(overlay);

// Add loading spinner (GIF image)
let loader = document.createElement('img');
loader.src = 'https://1208265-sb1.app.netsuite.com/core/media/media.nl?id=68116&c=1208265_SB1&h=llMLFWipig_QWqJLCAgrRD6ubfLR3jsuuiyqtTgD3Csw5LYt';
loader.id = 'loadingImage';
loader.style.position = 'fixed';
loader.style.top = '50%';
loader.style.left = '50%';
loader.style.transform = 'translate(-50%, -50%)';
loader.style.zIndex = '1000';
loader.style.width = '80px';  // Resize as needed
loader.style.height = '80px';
document.body.appendChild(loader);

Replace the loader.src URL with your own spinner GIF hosted in the NetSuite File Cabinet (ensure it’s marked Available Without Login if needed).

Cleanup After Processing (Remove Spinner)

When your operation completes or fails:

document.getElementById('loadingOverlay')?.remove();
document.getElementById('loadingImage')?.remove();

Pro Tips

• Add this inside your button handler or async operation block.
• Use setTimeout() or Promises to wait before removing overlay if needed.
• To also disable buttons, just add:

document.querySelectorAll('button, input[type=button]').forEach(btn => btn.disabled = true);

 Example Use Case

Used in a Suitelet with a “Download Excel” button:

• Show spinner and blur while generating the file.
• Remove blur after download starts and refresh page.