Image Placeholder to improve User Experience – Showpad Help Center

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

Previous 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

Get the latest apps and email integrations