Skip to content

tinajs/tina-loading

Repository files navigation

tina-loading

⏳ Loading plugin for Tina.js

npm license PRs Welcome

Setup

  1. Download package from npm
npm i --save @tinajs/tina-loading
  1. 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