Show / hide preloader on page load in Framework7

Question

I want to show a preloader over all the contents when a page is loading and hide it when the page load is finished and show the content (I'm not talking about internal links- like when you type an address in the browser and waiting for the page to load.) Like this demo: https://demo.app-framework.com/

I’ve tried this:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            app.preloader.hide();
        },
    }
  // ... other parameters
});

var mainView = app.views.create('.view-main');
app.preloader.show();

But it doesn't work it shows the loader like other elements and doesn't hide it, I'm not sure if its something possible. I would appreciate if someone can point me in the right direction.

Answer 1

That's because in the pageInit event you are referring to a variable which is not initialised by the time you are calling (var app), please find the code snippet usefull.

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',

    on: {
        init: function () {
            console.log('App initialized');
        },
        pageInit: function () {
            console.log('Page initialized');
            //app.preloader.hide(); //app is not yet initialized this will return an undefined error.
        },
    }
  // ... other parameters
});

var mainView = app.views.create('.view-main');
app.preloader.show(); //var app is initialized by now
app.on('pageInit', function (page) {
  console.log('Page is now initialized');
  app.preloader.hide();
});

Answer 2

The docs on Page has a section on Page Events. https://framework7.io/docs/page.html#page-name

Use app.preloader.show(); on an early event, and use app.preloader.hide(); when you want it removed.

    pageBeforeIn: function (e, page) {
        app.preloader.show();
    },
    pageAfterIn: function (e, page) {
        app.preloader.hide();
    },