Nativescript-ui-feedback: [Bug] [Vue] [RadListView] object.notifyPullToRefreshFinished() doesn't work on android when in async method.

[mathieutu]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

When @pullToRefreshInitiated refer an async method, the object.notifyPullToRefreshFinished() doesn't work on android, so spinner will infinitely rotate.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: "nativescript-ui-listview": "^3.7.1"
• CLI: 5.0.0-2018-10-16-12488
• Cross-platform modules: "tns-core-modules": "^4.2.0"
• Runtime(s): 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

• Pull to refresh.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

async refreshList({ object }: LoadOnDemandListViewEventData): Promise<void> {
    await this.fetchUsers();
    console.log('finishing');
    object.notifyPullToRefreshFinished();
    console.log('finished');
},

Here users are fetched, and "finishing" and "finished" are logged. put the spinner doesn't disappear.

Thanks.

PS: pinging @rigor789 on that 😇.

[msaelices]

@mathieutu what exactly the fetchUsers() async method does?

I've tried this code and it worked for me:

import { fetch } from 'tns-core-modules/fetch';

const getItems = () => {
  let headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }

  const payload = {
    headers,
    method: 'GET'
  };

  return new Promise((resolve, reject) => {
    fetch('http://lin.ngrok.io/items', payload)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        resolve(data);
      });
    });
};

export default {
  template: `
  <Page>
    <StackLayout>
      <RadListView ref="listView"
                   for="item in itemList"
                   pullToRefresh="true"
                   @pullToRefreshInitiated="onPullToRefreshInitiated">
        <v-template name="header">
          <StackLayout class="header">
            <Label text="Pull to refresh"></Label>
          </StackLayout>
        </v-template>

        <v-template>
          <StackLayout class="item" orientation="vertical">
            <Label :text="item.name">
            </Label>
          </StackLayout>
        </v-template>
    </RadListView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      title: description,
      itemList: [
        {
          name: 'Apple',
        },
        {
          name: 'Orange',
        },
        {
          name: 'Tomato',
        }
      ],
    };
  },
  methods: {
    async onPullToRefreshInitiated ({ object }) {
      console.log('Pulling...');
      await this.fetchItems();
      console.log('finishing...');
      object.notifyPullToRefreshFinished();
      console.log('finished');
    },
    fetchItems() {
      getItems()
        .then((data) => {
          this.itemList = data;
        })
    },
  }
};

[vratojr]

I have the same issue. In my code _fetchUsers_ is using Axios to perform a GET to the backend.
But I just tested using 'fetch' from core-modules and the problem persists.
And I do confirm that your example works in the context of my project... :)
Now I'm trying to find when does it break.

[vratojr]

@msaelices am I wrong or you forgot to return your promise in _fetchItems_?
In this way your call is non blocking.
If you try :

fetchItems() {
  return getItems()
    .then((data) => {
      this.itemList = data;
    })
}

then you'll be able to reproduce the bug.

[msaelices]

@vratojr how can you use await/async in TS with NS-Vue? I got this error:

System.err: Error: Module parse failed: The keyword 'yield' is reserved (61:12)
System.err: You may need an appropriate loader to handle this file type.

I've tried also this with no success: https://www.npmjs.com/package/nativescript-tslib

[vratojr]

It works as it is (using vue-template).I didn't do anything special to have it running. Maybe you forgot to put _async_ on the method containing the _await_ ?

Or I think that I didn't understand your question... In the example you posted, you ARE using async/await...

[msaelices]

@vratojr I think the demo is failing because the backend URL is http and not https.

The async/await is not working because my demo project was a TS based one, but I've created a new JS project which is working here: https://github.com/msaelices/ns-ui-rlv-app

Could you clone this repo and test it? it has instructions about using a REST mock and testing it.

[vratojr]

@msaelices I have cloned and tested and it works both with http and https... :/
I also tryied with axios and it works both ways.
So now I'm trying again to find the minimal way to reproduce the error I get. I'll post again as soon as I'll have news.

PS: Thank you for showing me a great tool like ngrok! :)

[vratojr]

@msaelices Hah! I got it. You are testing using {N}5.
This bug was open for {N}4 and "nativescript-ui-listview": "^3.7.1"
So I guess it's been fixed in V5... ;)
Even though I would be nice to have a fix for v4 since not all the plugins are ready for V5 afaik.