Introduction: –
User experience (UX) plays a crucial role in modern web applications. A smooth and intuitive interface keeps users engaged and improves usability. One common challenge in Oracle APEX applications is dealing with delays during page loads, AJAX calls, and long-running processes. Without a clear indicator, users might feel the application is unresponsive.
To address this, we can implement a custom loading image (overlay) that appears during page loads, AJAX requests, and form submissions. This simple enhancement significantly improves UX by providing real-time feedback.
The following technologies have been used to achieve the same.
- CSS
- JavaScript
- Oracle APEX
Why we need to do: –
- Better User Engagement– Users stay informed that a process is running instead of assuming the app is stuck.
- Improved Perceived Performance– Even if a request takes time, a loading indicator makes it feel faster.
- Prevents Unnecessary Actions– Users won’t repeatedly click buttons or refresh the page, reducing unintended duplicate requests.
- Professional & Polished Look– A branded loading animation enhances the app’s aesthetics.
In Oracle APEX, while built-in loading indicators exist, they might not always be noticeable or fit custom UI designs. Hence, a custom loading overlay is a great solution.
How do we solve:
We will use a custom loading overlay that appears during:
✅ Page Load
✅ AJAX Requests (Dynamic Actions, Interactive Grids, Reports)
✅ Page Submissions
The following steps will help to customize calendar in Oracle APEX
Step 1: Create a static region in the global page and past the following code in that region.
Code:
<!– Loading overlay HTML with your icon and text –>
<div id=”loadingOverlay” class=”loading-overlay”>
<div class=”loading-content”>
<img src=”#APP_FILES#loadingImage.gif” alt=”Loading” class=”loading-icon”>
<p class=”loading-text”>Please wait… Not turning into a skeleton yet, right? 💀</p>
</div>
</div>
<style>
/* Style for the overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Make sure it stays on top of all other content */
display: none; /* Hidden by default */
}
/* Container to center both the image and the text */
.loading-content {
text-align: center;
}
/* Style for the loading icon */
.loading-icon {
width: 100px;
height: auto;
border-radius: 100px;
}
/* Style for the loading text */
.loading-text {
font-size: 18px;
color: #333; /* Dark color for the text */
margin-top: 10px; /* Space between the image and text */
font-family: Arial, sans-serif;
font-weight: bold; /* Bold text */
}
/* Hide the loading overlay when the page is loaded */
.loading-overlay.hide {
display: none;
}
</style>
<script>
// Show loading overlay before page unload
window.addEventListener(‘beforeunload’, function () {
document.getElementById(‘loadingOverlay’).style.display = ‘flex’;
});
// Hide the loading overlay once the page has fully loaded
window.addEventListener(‘load’, function () {
document.getElementById(‘loadingOverlay’).style.display = ‘none’;
});
// Override default APEX spinner
apex.util.showSpinner = function () {
document.getElementById(‘loadingOverlay’).style.display = ‘flex’; // Show custom overlay
};
// Hide spinner when all APEX AJAX calls complete
$(document).ajaxStop(function () {
setTimeout(function () {
document.getElementById(‘loadingOverlay’).style.display = ‘none’; // Hide after 0.5s
}, 500);
});
</script>
Result:
Conclusion:
Implementing a custom loading overlay in Oracle APEX is a simple yet powerful way to enhance user experience. By providing clear visual feedback, users feel more engaged, reducing frustration and improving overall interaction.
This method can be further customized with different images, animations, and branding elements to match your application’s theme. Start implementing this in your APEX projects today and make your applications feel faster, smoother, and more user-friendly!
