Awesome

tina-loading

:hourglass_flowing_sand: Loading plugin for Tina.js

Setup

1. Download package from npm

npm i --save @tinajs/tina-loading

2. Install into Tina

// app.js
import Tina from '@tinajs/tina'
import loading from '@tinajs/tina-loading'

Tina.use(loading)

Usage

Normally use $loading.push() and $loading.pop() methods:

// pages/some-page.js
import { Page } from '@tinajs/tina'
import { fetchData } from '../api'
Page.define({
  async onLoad () {
    this.$loading.push()
    try {
      const data = await fetchData()
      // ...balabala
    } catch () {}
    this.$loading.pop()
  },
})

Each time calling $loading.push() method should come with one $loading.pop().

Or simply use $loading() with Promise.prototype.finally:

// pages/some-page.js
import { Page } from '@tinajs/tina'
import { fetchData } from '../api'
Page.define({
  onLoad () {
    fetchData()
      .then((data) => {
        // ...balabala
      })
      // trick here
      .finally(this.$loading())
  },
})

API

Page and Component Injections

$loading()

• Returns: Function

• Details:

  Just a short way to call $loading.push() and return $loading.pop

$loading.push()

• Details:

  Shows the loading spinner on the navigator bar, and pushes a loading-request to the cached stack.

$loading.pop()

• Details:

  Pops a loading-request from the cached stack, and hides the loading spinner on the navigator bar if the cached stack is empty.

$loading.isLoading()

• Returns: Boolean

License

MIT @ yelo