most of my pages in my recent project follow this scheme:
- the user taps to a menu item in the left panel which navigates to a certain page
- then the app queries some data from a remote service via ajax (using Framework7.Request actually) in the page:init event callback
- 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?