Image Placeholder to improve User Experience Updated November 22, 2025 00:57 When building web applications, ensuring a seamless transition between loading states and interactive content is crucial. The provided HTML and JavaScript code demonstrates an elegant way to manage this transition by displaying a placeholder image until the ShowpadLib becomes available. This technique is particularly useful for applications that rely on external scripts or APIs to initialize properly. Key benefits Improved user experience Efficient loading management Reduced perceived load time You need this to succeed Plan: eOS Expert, eOS Advanced, eOS Professional Legacy plan: Showpad Content Essential or higher Permissions: Administrator, Promoted Member with Content permission Prerequisites: Familiarity with HTML5, Javascript, CSS, memory, and image handling Development tools to check memory usage of your HTML app like XCode (iOS) or Chrome DevTools (Web) Web apps and HTML apps corresponding to the recommended file size Content to use in your custom web app Do this step by step The ShowpadLib is always loaded when you're in the Web App or any of our other apps. Add the following check into the header of your HTML page: document.addEventListener("DOMContentLoaded", function() { processingTest = setInterval(function() { /* if the ShowpadLib is not defined, we're in processing mode :-) */ if (window.ShowpadLib != undefined) { /* ... */ clearInterval(processingTest); } }, 300); }); Here's a full code example: <html> <head> <script> document.addEventListener("DOMContentLoaded", function() { thumbnail = document.getElementById("thumbnail"); app = document.getElementById("app"); processingTest = setInterval(function() { /* if the ShowpadLib is not defined, we're in processing mode :-) */ if (window.ShowpadLib != undefined) { thumbnail.style.display = 'none'; app.style.display = 'block'; app.style.width = '100%'; app.style.height = '100%'; /* trigger whatever you need to do to start the app */ clearInterval(processingTest); } }, 300); }); </script> </head> <body> <img id="thumbnail" src="./img/thumbnail.png" style="display:block;" /> <div id="app" style="display: none;"></div> </body> </html> Related articles Prefill email Shares or links URL scheme requirements Introduction to web apps and HTML content Bulk edit tags in Smart Folders Showpad Content ROI reports within Salesforce