Using PleaseWait.js loading screen with Vue-CLI

Question

I need to use PleaseWait.js loader screen in my Webpack Vue-CLI project.

I searched for any Vue-friendly alternatives, but didn't find any suitable packages.

I also found this, which is a demo of using PleaseWait.js with Vue, but it didn't work with Webpack, basically because of this error:

Error in mounted hook: "TypeError: please_wait__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function"

I am looking for a way to make it work, or for any good alternatives.

Answer 1

Here's how you would import it in your Vue CLI project:

1. Install please-wait as a dependency with this command:

   npm i -S please-wait
   

2. Create a single file component in src/components/Loader.vue with an empty template (please-wait already attaches its own HTML to the document):

   <template>
     <div v-once></div>
   </template>
   

3. In Loader.vue's <script>, import please-wait and its CSS:

   import { pleaseWait } from 'please-wait'
   import 'please-wait/build/please-wait.css'
   

4. Also add a prop and a corresponding watcher that will open the please-wait loader based on the prop value:

   export default {
     props: ['isLoading'],
     watch: {
       isLoading: {
         handler(isLoading) {
           if (isLoading) {
             this.open()
           } else {
             this.close()
           }
         },
         immediate: true,
       }
     },
   }
   

5. Also define the open/close methods used by the watcher:

   export default {
     methods: {
       open() {
         // Attaching a `pleaseWaitInstance` property (no need to declare)...
         if (!this.pleaseWaitInstance) {
           this.pleaseWaitInstance = pleaseWait({
             logo: 'https://pathgather.github.io/please-wait/assets/images/pathgather.png',
             backgroundColor: '#f46d3b',
             loadingHtml: '<p class="loading-message">A good day to you fine user!</p>'
           })
         }
       },
       close() {
         if (this.pleaseWaitInstance) {
           this.pleaseWaitInstance.finish()
           this.pleaseWaitInstance = null
         }
       }
     }
   }
   

6. In Loader.vue's <style>, add CSS to make the loading message's text (created in the open method) appear white.

   .loading-message {
     color: white;
   }
   

7. In src/App.vue, import the Loader component from above, and add it to the template:

   <template>
     <div>
       <loading-screen :is-loading="isLoading"></loading-screen>
       ...
     </div>
   </template>
   
   <script>
   import Loader from "./components/Loader";
   ...
   
   export default {
     components: {
       'loading-screen': Loader
     },
     data() {
       return {
         isLoading: true
       }
     },
     mounted () {
       setTimeout(() => {
         this.isLoading = false
       }, 2000)
     }
   }
   </script>
   

demo