Add preload spinner

Martin

create a styled re-usable Loader.js with the quasar Loading component…
more info: http://quasar-framework.org/components/loading.html

import {Loading} from 'quasar-framework'
const Loader = {
  show : () => {
    Loading.show(
      {
        delay        : 300,
        message      : 'Loading...',
        messageColor : '#C86F51',
        spinner      : 'tail',
        spinnerSize  : 60, // in pixels
        spinnerColor : '#C86F51'
      }
    )
  },
  hide : () => {
    Loading.hide()
  }
}
export default Loader

import Loader.js into your Vue component, and attach the methods…

<script>
  import Loader from '../common/Loader.js'
... 
 export default {
    methods : {
      hideLoader () {
        Loader.hide()
      },
      showLoader() {
        Loader.show()
      },
...

add “show” to the Component’s “created()” function…

...
created() {
      this.showLoader()
    },
...

add “hide” to the template’s img tag load event.
more info about html events here :
http://www.quackit.com/html_5/tags/html_5_event_handler_content_attributes.cfm

<template>
...
<div>
      <img
        @load="hideLoader()"
        class="responsive"
        :src="user.avatar"/>
    </div>
...

That’s about it.
I will do a quasar request for a preload spinner, specifically inside img tags.
Saves us some boiler code

rstoenescu

Will do. Thanks for posting this.