Dynamic Content Loading Using Fetch API – pill.js

Preview:

Description:

pill.js is an ultra-lightweight JavaScript library to make your webpage behavior like the native app by dynamically loading content into the current webpage using Fetch API.

With pill.js, you can display a top loading indicator on the top until the requested content resources have been loaded in the document.

How to use it:

Installation:

Install & download.

# NPM
$ npm install pill --save

Load the pill.js into the document.

<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>

Create a sticky loading indicator on the top of the webpage.

<div id="indicator">Loading...</div>

#indicator {
  position: fixed;
  top: 0;
  right: 0;
  display: none;
}

const loadingIndicator = document.querySelector('#indicator')

Initialize the pill library on the web content.

<div id="content">
  <!-- content here -->
</div>

pill('#content')

Activate the loading indicator.

pill('#content', {
  onLoading() {
    loadingIndicator.style.display = 'initial'
  },
  onReady() {
    loadingIndicator.style.display = 'none'
  }
})

More configuration options.

pill('#content', {
  /* error handler
     function defaultErrorHandler() {
      return {
        title: 'Error',
        content: `<h1>Error</h1><p>Ooops. Something went wrong</p>`,
        code: 500,
        timestamp: new Date(),
      }
    }
  */
  fromError: defaultErrorHandler,
  /* determines whether the URL could be served by Pill
     function shouldServeDefault(href) {
       return href.origin === location.origin
     }
  */
  shouldServe: shouldServeDefault,
  // determines whether previuosly loaded page should be loaded from server
  shouldReload() {}
  
})