In most mobile apps and even some desktop apps, you will most likely have some API communication to a server via an Ajax call. Since these calls can take more than a second or two, it is good UX to offer the user feedback, when such an API call is being made. Which is where QAjaxBar comes into helping you out.

QAjaxBar is a component which displays a loading bar (like Youtube) whenever an Ajax call (regardless of Ajax library used) is in progress. It can be manually triggered as well.

Usage

The QAjaxBar component captures Ajax calls automatically (unless told not to).

The example below triggers events manually for demonstrating purposes only. This one is set to appear at bottom (multiple positions available!) of the page, with a 10px size (default is different) and uses a custom color.

Basic

Please check out the API section for all properties that you can use.

Ajax filter

v2.4.5+

Should you want QAjaxBar to trigger only for some URLs (and not for all, like in the default behavior), then you can use the hijackFilter property:

<template>
  <q-ajax-bar :hijack-filter="myFilterFn" />
</template>

<script>
export default {
  setup () {
    return {
      myFilterFn (url) {
        // example (only https://my-service.com/* should trigger)
        return /^https:\/\/my-service\.com/.test(url)
      }
    }
  }
}
</script>

Tips

• If multiple events are captured by Ajax Bar simultaneously, @start and @stop will still be triggered only once: when bar starts showing up and when it becomes hidden.
• Each Ajax call makes a start() call when it is triggered. When it ends, it calls stop(). So yes, if you also manually trigger QAjaxBar you must call start() each time a new event is starting and stop() each time an event finished. QAjaxBar knows to handle multiple events simultaneously.
• The automatic capture is designed to function exclusively with libraries utilizing XMLHttpRequest (XHR). Consequently, if you opt for the native browser Fetch API, it won’t initiate the loading bar automatically.