f / vue-wait Goto Github PK

Hi,
Would this be possible to add support for different name for "waitingActions".
This could be useful especially when two actions has the same name in different modules.
Something like in the example code below.

...mapWaitingActions('vuex_module_name', {
  someActionFromModule: { waiter: 'this is waiter for someAction', action: 'actionName' } 
}),

Kind regards,
Maciek

I can't use waitfor helper for any situation.
Here is how I install the VueWait instance.

I think i need a waitFor method from wait instance, but it had nothing.

import VueWait from 'vue-wait';

...
new Vue({
....
 wait: new VueWait({ useVuex: true })
})

how can use the vuex-loading in mpvue
mpvue: https://github.com/Meituan-Dianping/mpvue

Documentation for vuex integration looks incomplete. Please show how to access vuex getters inside other getters. Like

    [Getters.cartOperationsInProgress]: (state: CartState, getters, rootState, rootGetters): boolean => {
        console.log('cartOperationsInProgress');

        return rootGetters['wait/is']('cart.*');
    },

For example have 2 actions: addProductToCart, refreshCart. Each of they call startLoading(dispatcher, 'cart') on method enter and endLoading(dispatcher, 'cart') before each return. The problem occurs when addProductToCart calls refreshCart inside. End loading occurs too early.

It is similar to nested transactions.

Looks like the most recent change increased the dist file size by nearly 7x. Was this a mistake or was that really necessary to fix the mobile Safari issue?

I would like to write a unit test with the async action such as:
File navigation.spec.js:
`

import Vue from 'vue'

import Vuex from 'vuex'

import Vuetify from 'vuetify'

import vueLoading from 'vuex-loading'

import { shallow, createLocalVue } from '@vue/test-utils'

import Navigation from '@/components/Navigation'

import { stat } from 'fs';

Vue.use(Vuetify)

Vue.use(vueLoading)
const localVue = createLocalVue()

localVue.use(Vuex)
describe('Navigation', () => {

let store

let actions

let state
beforeEach(() => {

state = {

items: []

}
actions = {
  getAsync: jest.fn()
}

store = new Vuex.Store({
  state,
  actions
})

})
it('dispatches an getAsync action', () => {

const wrapper = shallow(Navigation, {

store,

localVue

})

wrapper.find('button').trigger('click')

expect(actions.getAsync).toHaveBeenCalled()

})

})
`

File Navigation.vue:

`
  

    
      
        Loading...
      
      Call ajax
    
    
call ajax...
    

      

        {{ item.title }} 

        {{ item.body }}
      
    
  

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'RecipeNavigation',
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapActions(['getAsync']),
    fetchResults () {
      this.getAsync()
    },
    onClose () {
      this.$emit('close', this.$el)
    }
  }
}
</script>
`
The result of test:

[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'isLoading' of undefined"
Please help me to pass this issue. Thank you for any help you can offer
    

It should be a good feature an option to "waiting" slot overlay the content instead of hiding it since the "waiting" be able to know the component height.

Or any idea how to do this?

Here's my question:
TypeError: this.$loading.init is not a function

use:
"vue": "^2.5.9",
"vuex": "^3.0.1",
"vuex-loading": "^0.2.6"

I have the following in a JSX render function:

loading={this.$wait.isWaiting( [ "myFirstLoader", "mySecondLoader" ] )}

And I recieve the error:
"TypeError: waiter.match is not a function" from utils.js

This only happens when passing an array to isWaiting.

Hi,

I think it might be a good idea having isLoading handle strings and arrays:
$loading.isLoading(['getData', 'saveData'])

https://github.com/f/vuex-loading/blob/d45d7fd2df6d9d751040947c14f9f83d2021d403/src/vuex-loading.js#L51

I have problem Cannot assign to read only property 'message' of object '' after build nuxt. please fix it. thanks

Hi!

I'm triying to add transitions to "waiting" slot, but it doesn't work.

Here an example codesandbox: https://codesandbox.io/s/0p2v1jmm8l

Splitting a Vuex store in one of my projects into namespaced modules made me think of the following.

Current way to use vue-wait with namespaced Vuex modules seems to be:
(Not documented btw.)

import { mapWaitingActions } from 'vue-wait'

// ...
  methods: {
    ...mapWaitingActions('users', {
      'user/getUser': 'loading the user',
    }),
  },
  mounted() {
    // get the user data
    this.user = this['user/getUser'](this.userId);
  },
// ...

I think something like this would be more preferable:

import { mapWaitingActions } from 'vue-wait'

// ...
  methods: {
    ...mapWaitingActions('users', {
      getUser: ['user/getUser', 'loading the user'],
    }),
  },
  mounted() {
    // get the user data
    this.user = this.getUser(this.userId);
  },
// ...

Thanks.

I'm trying add this plugin to non-SPA lagacy project. And there is an error with useVuex: true and multiple Vue instances on same page.

Looks like plugin tryes add getters for each instance and we got error from Vuex about getters already reistered

Maybe we can create a static @storybook/vue for gh-pages branch.

Hello,

I use .vue files for my components and webpack.
I tried to use v-loading component on my template, and i get this error at runtime:

vue.runtime.esm.js:570 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

Any ideas?

thanks

1. Would be allow trigger NuxtJS loading api on some loaders (provide regex pattern/filter callback)
2. Integrations with axios like in https://github.com/tahq69/vue-loading (maybe using loading percents calculation)

Are there some basic instructions or maybe an issue (that I wasn't able to find) about dropping vuex-loading and moving to vue-wait?
For example,
createActionHelpers is not there anymore, what do we replace that with?
Thanks!

Use aria-busy for the loading elements.

Refs: https://accessibilityresources.org/aria-busy

Hi,

There are some minification issues on Safari iphone because package.json points to dist/vue-wait.js instead of src/vue-wait.js.

"main": "dist/vue-wait.js",
Happens only on old Safari versions, below version 11.

Thanks.

Right now, the v-wait component doesn't support passing Array of strings. The component works correctly with arrays under the hood ($waitInstance.is() accepts arrays as well), but it throws the prop validation error in the console.

how can I remove the out wrap div and span?

i've tryed to link a loader to

$wait.is(['routing', 'fetch detail*', 'set status', 'fetch dashboard*'])

but all the fetch details (es. 'fetch detail documents' or 'fetch detail user') and all the dashboards fails to show the loader

I think that in Readme should be present a section for using this plugin in typescript.
To add the property "wait" to new Vue({wait: new VueWait()}) you need to define a type definitions like the one attached, otherwise will be raised an error because the property does not exist.
vue-wait-property.d.ts.zip

https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html
http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

I want to add full set of features for tracking progress information (with backward compatibility) just by extending methods with optional parameters about progress.

Because this feature will transform this library from
Complex Loader Management for Vue/Vuex Applications
to Complex Progress Management for Vue/Vuex Applications , propose to rename this project to Vue-progress and change description to
Complex Progress Management for Vue/Vuex Applications
then we can rename this.$loading to this.$progress which is much better in my opinion.

This repo then will redirect to new repo.

This is not necessary but will reflect much better the project purpose

Hello!
In examples/vuex-example/main.vue there is ...mapWaitingActions({ incrementAsync: 'incrementing count', }), , where string is "incrementing count", but in usage above there is <v-wait for="incrementing" message='incrementing...'>, where "for" is equal to "incrementing". I think it should be equal to "incrementing count". Could you please fix this?

What about to map waiters with action`s names?

...mapWaitingActions('someModule', ['someAction1', 'someAction2']);

It could be useful in some cases

I noticed while I was uisng the v-wait component, my component that I was wrapping was being created twice. First on initial load, then again after my call to my API to load the data. Looking over the source and the vuejs docs I saw this:

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Which states that:

"...child components inside the conditional block are properly destroyed and re-created during toggles"

I wonder if it would be better for v-wait to use v-show instead? Or add an option?

In the Global Action Helpers example, a dispatch object is expected to be passed into the startLoading() method. What is this object and how do I find it? Thanks.

version: 0.2.6

I've setup vuex-loading as described in the docs, with vuex support enabled. When i use this.$vuexLoading.isLoading from a component, i get

TypeError: Cannot read property 'isLoading' of undefined

thanks in advance

Sometimes the response is too fast (e.g. cache) so delay is good solution to avoid loading spinner if that's shows only for few milliseconds.

Here is my util fot that:

import { createActionHelpers } from 'vuex-loading'

import { delay } from 'lodash/function'

export function createDelayedLoading (options, wait = 1) {
  let actionHelpers = createActionHelpers(options)
  let { startLoading: startLoadingFn, endLoading: endLoadingFn } = actionHelpers
  if (wait) {
    let delayed = null
    actionHelpers = {
      startLoading: (dispatcher, loader, callback) => {
        delayed = delay(() => {
          startLoadingFn(dispatcher, loader, callback)
        }, wait)
      },
      endLoading: (dispatcher, loader) => {
        clearTimeout(delayed)
        endLoadingFn(dispatcher, loader)
      }
    }
  }
  return actionHelpers
}

What do you think about adding something similar to the project?

Hi there, your loader is best of this https://github.com/vuejs/awesome-vue#loader by api and features but require vuex. Can you make vuex optional for people who use it, and provide all features by plugin itself without vuex store?
I can help with that if you want.

Goal: Combine vue-element with vuex-loading (without vuex)
Issue: The $loading property is already added to the instance by vue-element

I tried to add the configurable option loadingName, but i.e. options.parent["loader"] stays undefined.

How to solve that?

// vuex-loading.js
Vue.mixin({
    /**
     * VueLoading init hook, injected into each instances init hooks list.
     */
    beforeCreate () {
      const options = this.$options
      if (options.VueLoading) {
        this[options.loadingName] =
          typeof options.VueLoading === 'function'
            ? new options.VueLoading()
            : options.VueLoading
        this[options.loadingName].init(Vue, options.store) // store injection
      } else if (options.parent && options.parent[options.loadingName]) {
        console.log(this[options.loadingName])
        this[options.loadingName] = options.parent[options.loadingName]
        this[options.loadingName].init(Vue, options.parent.$store)
      }
    }
  })

For now we need add to much mess code for using loading. Initiate start loading before action calling and call stop loading before each return or inside finally block. Is it possible enhance library with decorators? To add only one decorator above action.

Error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

app.js:

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
      el: '#app',

      store,

      wait: new VueWait(),

      components: {
        // ...
      }
    })
  }
})

It does not help:

wait: new VueWait({
  accessorName: '$wait',

  useVuex: true,
  vuexModuleName: 'wait',

  registerComponent: true,
  componentName: 'v-wait',

  registerDirective: true,
  directiveName: 'v-wait',
})

component.vue:

<template>
  <v-wait for="loading items">
    <template slot="waiting">
      <div>
        Loading the list...
      </div>
    </template>

    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{item}}
      </li>
    </ul>
  </v-wait>
</template>

Why does this error occur?

Trying to run

import { wrapLoading } from "vuex-loading"

console.log( wrapLoading ); // undefined

Guessing this is because the dist file hasn't been updated for v0.4.0?

Hi, I have a proposal: add 2 action helpers - mapActions and mapDecoratedActions

https://gist.github.com/fxmaxvl/9353355f352561376812e90cff6a8a8b

mapActions:
It just extends action's context and provides $loading property with startLoading and endLoading helpers.
It makes module's actions code cleaner and more testable.

mapDecoratedActions:
It wraps action in try/finally block.
It can significantly reduce a boilerplate code with startLoading / endLoading.

Since vuex-loading is not really Vuex related now, we need a new name. vue-loading is registered.

Maybe we can find a fancier (hipster) name. Should we use vue- prefix?

Hey!

First of all, I wanna thank you for such a good job you're doing!

The problem I wanna draw your attention to is about transition. After you introduced the transition element our application got broken. So here's the thing, if we send multiple elements as content for v-wait, Vue is complaining about multiple elements inside of transition and asking to use transition-group instead.

We can easily fix it by wrapping content into div, but as long as it's something that pretty hard to debug, you might want to do it on vue-wait side

Thanks!

This loader realy amazing and I'm happy to see made by a turkish people something open source.

when I use $wait.is('login'), error throw and everything stop working. Could you fix that, thanks.

[Vue warn]: Error in render: "TypeError: Object doesn't support property or method 'includes'"

I was using previous startLoading decorator function and I don't understand how it can be replaced from the new documentation. Can you maybe point me to the right direction?

Here is my example usage with vuex-loading:

dispatch('setActivities', await startLoading(dispatch, 'fetch activities', () => Activity.fetchAll()))

I using vue-wait of Nuxt.js, but it v-wait.click.start="'myloading'" not end in this.$wait.end('myloading').

Using webpack3,
a package you use "matcher" cause: (I thought it was vue-wait but seems not)

ERROR in ... from UglifyJs
Unexpected character '`' ...

Not sure why it is like this, I had to put your package source as well as matcher in my source and transform with my babel setup.

I was using this starting vuex-loading and it happens when I recently upgrade to this.
I think it is because matcher does not transform the code but I am not sure...
You might want to try it out yourself cuz this can make lots of frontend people move away from vue-wait which is a awesome package.

Just as the title said, the v1.4.6 in npm registry is still the old version, and lack of nuxt typescript support.

Release a new patch version could solve this, I thought.

The comment //It's optional, 'loading'by default. is (as far as I can see) wrong, default vuex module is wait.

new Vue({
  el: '#app',
  store,
  wait: new VueWait({
    useVuex: true, // You must pass this option `true` to use Vuex
    vuexModuleName: 'vuex-example-module' // It's optional, `loading` by default.
  }),
});

I find this library extremely useful, but the used property name is causing problems for me.

For example I'm using it along with element-ui, which also defined a this.$loading field resulting in errors.

In VueJS documentation, there is the recommendation of giving such field unique names:
https://vuejs.org/v2/style-guide/#Private-property-names-essential

It would be great if the exposed field could be defined in the constructor options, or renamed entirely to something else like $vuexLoading

The new version 0.2.5 seems to be broken.

import VueLoading from 'vuex-loading'
console.log(VueLoading) // output undefined