In NetSuite, when executing a heavy client-side operation (like dynamic record updates), users may experience delays without visual feedback. A great way to improve UX is by showing a loading spinner with a blurred background during processing. This can be done using a simple Client Script.
Why Use a Spinner?
- A spinner provides:
- Immediate feedback to users after clicking a button
- Prevention of duplicate clicks or premature navigation
- A polished, professional experience
Step-by-Step Code Implementation
Paste the following into your Client Script:
Usage
Call showLoadingSpinner() before a long operation, and hideLoadingSpinner() after it completes. For page reloads, skip hiding—it will disappear automatically.
/**
* Displays a fullscreen blurred overlay with a spinning loader.
*/
function showLoadingSpinner() {
try {
if (!document.getElementById('loadingSpinnerOverlay')) {
const overlay = document.createElement('div');
overlay.id = 'loadingSpinnerOverlay';
overlay.style.cssText = `
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2147483647;
`;
overlay.innerHTML = `
<div style="
width: 60px; height: 60px;
border: 8px solid #eee;
border-top: 8px solid #0070d2;
border-radius: 50%;
animation: spin 0.8s linear infinite;
"></div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
`;
document.body.appendChild(overlay);
} else {
document.getElementById('loadingSpinnerOverlay').style.display = 'flex';
}
} catch (e) {
console.error('Spinner error:', e);
}
}
/**
* Hides the spinner overlay.
*/
function hideLoadingSpinner() {
try {
const overlay = document.getElementById('loadingSpinnerOverlay');
if (overlay) overlay.style.display = 'none';
} catch (e) {
console.error('Hide spinner error:', e);
}
}