Ajax request before page animation


#1

Hi,

most of my pages in my recent project follow this scheme:

  1. the user taps to a menu item in the left panel which navigates to a certain page
  2. then the app queries some data from a remote service via ajax (using Framework7.Request actually) in the page:init event callback
  3. once the ajax request succeeds, the viewmodel is populated with data from the service response

This scheme works well, but has a serious drawback: the user can see the “empty” page until the ajax request succeeds (or fails). However I’d like a solution where page animation doesn’t even start until the ajax request is finished. I tried page:beforein callback as well - but no visible difference to page:init.
I also thought of relocating the ajax request to the page router, but that would mean doing a page’s internal operation outside of the page/component logic, which is an architectural kludge.

Is there any idea what could be a good solution to this issue?

Thanks,
Bálint


#2

There only way is to use async here and call response data as Route context, and keep context handling and other logic in page component. Because once Route entred/resolved there is no way of preventing page animation and loading.


#3

Thanks, gonna see that!