Skip to main content

Image Placeholder

||

ShowpadLib is made available by the Showpad platform after the page loads. Until it's available, your app has no access to SDK functions. Displaying a placeholder image during this window prevents a blank screen and gives users visual feedback while the app initializes.

What you'll learn

  • How to detect when ShowpadLib is ready
  • How to show a placeholder image while the app loads
  • How to swap the placeholder for your app content once the SDK is available
TL;DR
  • Poll for window.ShowpadLib !== undefined on a 300ms interval
  • Show a placeholder image while waiting
  • Hide the placeholder and display your app once ShowpadLib is ready
Prerequisites
  • Plan: eOS Expert, eOS Advanced, eOS Professional
  • Legacy plan: Showpad Content Essential or higher
  • Permissions: Administrator, Promoted Member with Content permission

Implementation​

Add the following check to the <head> of your index.html. It polls every 300ms until ShowpadLib is available:

document.addEventListener('DOMContentLoaded', function () {
  var processingTest = setInterval(function () {
    /* if ShowpadLib is not defined, we're in processing mode :-) */
    if (window.ShowpadLib !== undefined) {
      clearInterval(processingTest);
    }
  }, 300);
});

Full example​

<html>
  <head>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var thumbnail = document.getElementById('thumbnail');
        var app = document.getElementById('app');

        var processingTest = setInterval(function () {
          /* if 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>

This implementation:

  1. Shows a thumbnail image while the page loads
  2. Checks every 300ms if ShowpadLib is available
  3. Once available, hides the thumbnail and displays the app container
  4. Clears the interval to stop checking

Next steps​

  • SDK Integration - Call SDK functions once the Showpad JavaScript library is ready
  • Prefill Shares - Pre-populate share dialogs with recipients and content

Was this page helpful?