Ajax request before page animation


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?


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.

Thanks, gonna see that!