Loading Component - nativeElement - Uncaught promise

Ionic Framework ionic-v3
1

Hi All,

I’m using a Loading component to inform the user that the app is fetching records from the onboard SQLite DB.
The method fetchSchedule() determines if any schedule objects are currently stored in memory and returns them, and if not, returns them from the SQLite database.

The method works well when no objects exist in memory. The loading component is presented, remains on screen until the promise is returned from the fetchSchedule method, and the Loading component is dismissed.
On the other hand, if the objects do exist in memory, I get an unhanded promise error relating to the Loading component, and the loading component does not dismiss until the duration has elapsed:

browser_adapter.ts:73 Error: Uncaught (in promise): TypeError: Cannot read property ‘nativeElement’ of undefined

It would seem to me that the Loading component has not been initialised yet, and therefore cannot be dismissed yet. I assume this is because the fetchSchedule objects already exist in memory, and the then() runs immediately.

updateSchedule() {
        this.loading = Loading.create({
          content: "Loading Schedule",
          duration: 10000
        });

        this.nav.present(this.loading);

        this.scheduleController.fetchSchedule().then(data => {
          this.groups = data;
          this.shownSessions = data.length;
          this.loading.dismiss();
        });
      }

Would anyone have any ideas how ensure dismiss is called and works as expected?

2

If you want to be sure that NavController has finished presenting your loading component you can move your fetchSchedule() call into the promise that this.nav.present() returns:

updateSchedule() {
    this.loading = Loading.create({
      content: "Loading Schedule"
    });

    this.nav.present(this.loading).then(() => {
      this.scheduleController.fetchSchedule().then(data => {
        this.groups = data;
        this.shownSessions = data.length;
        this.loading.dismiss();
      });
    });
  }
3 Likes
3

I hadn’t realised that nav.present returned a promise!
@AndyM3Kt Thanks for the response and just to let you know it works perfectly.
Thanks again!

1 Like
4

Hey @pjhartin could you provide sample code on how you did it ?
I’m getting Attempt to use a destroyed view: detectChanges error

5

The code for the solution above is complete, I don’t think there’s anything additional that can be provided.

I can add one note, because you are explicitly closing the loading component the duration property isn’t necessary, honestly I’d omit it as it could create problems.

For your issue, I’ve seen that error before, I’d recommend posting a new question on this forum with your code so we can take a look and try to help.

1 Like
6

Thanks @AndyM3Kt Will do that