wq/wq.app

prefetching spinner disappears

tomaszn opened this issue · 2 comments

I'd like to display a spinner after the user logs in and display it until prefetchAll finishes, so the user can't start using the application before information is fetched.

It more or less works on the main page (if I reload the application), but the spinner disappears too quickly when the user logs in using the typical /login page template.

I noticed that these fetch requests are duplicated for a reason unknown to me. When reloading the main page, these duplicated requests are running concurrently, so the modal window disappears in the right moment.

My current login handler looks like this:

$('body').on('login', function(event){
    console.log('login event!', event);
    $('body').append('<div class="prefetchMsg">updating local data...');
    app.prefetchAll().then(function(prefetched) {
        console.log('login / prefetched ' + prefetched.length + ' databases.');
        $('.prefetchMsg').remove();
    });
});

Maybe there is a better way to run prefetchAll with a modal window that would work when the user logs in and when he reloads the application?

I managed to solve this problem by waiting for a next show event in the "user logs in" scenario:

$('body').on('login', function(event) {
    $('body').one('pagecontainershow', function() {
        $('body').append('<div class="prefetchMsg">updating local data...');
        app.prefetchAll().then(function(prefetched) {
            console.log('login / prefetched ' + prefetched.length + ' databases.');
            $('.prefetchMsg').remove();
            app.replaceState('');
        });
    });
});

But still, reloading the application with solution of "redraw of the home screen whenever the application loads for the first time" mentioned in #79 the requests are duplicated.

I updated prefetchAll() to accept a message argument. If a message is specified, the spinner remain active until prefetchAll() completes, regardless of what else is happening to start/stop the spinner (such as page navigation and form submission events).