Loading Screen 101 - How to do it (in simple words)?

help
1

Hey guys,

I am trying to add a loading screen to my app (simple thing, just a spinner) but am having some trouble understanding how to add it (the “conditional” that says “if loading, render this spinner instead of the html”). I read a lot about using the inject-initial package, but the configuration of it is not easy to understand for beginners.

Is there an easier way or can someone explain to me how to configure inject-initial?

Thanks!

2

If you paste some of the code used in the page, and give a few more details about what you are trying to accomplish, you are more likely to get help.

Also, some details about your strategy would be good. E.g. the spinner HTML is in the page, and you need to animate it vs. using an external plugin.

3

Hi,

I would like to use the MaterializeCSS preloader spinner: https://materializecss.com/preloader.html
My goal is to have a page with nothing but the spinner appear while pages are being loaded. I am not worried about loading inside a page (e.g. after user performs an action) - just the initial render of the page itself.

I could simply create a preloader.html file and put the spinner inside a < template >… but then, how do I get this template to run in the appropriate moments?

4

So, you’d like to show the spinner while your Meteor bundle is being downloaded?

5

Exactly! When opening the app and during pageload

6

Ok, in this case you need a little bit of planning. It’s a bit more complex than a few posts in a forum, but not very complicated. This is roughly what I would do:

  1. Make use of dynamic imports. Have all my modules nicely organised in folders, using imports, then one big index.js file that imports from each module. Then dynamically import the latter in the frontend like this: import('/imports/startup/client/index').then(arg => myStartupFunc(arg))
  2. Add a main.html file in the client folder (see the structure page - excellent read!) and a corresponding main.js. Have a look at this codepen, which does pretty much what you need. In the onRendered callback I would put the code to start the spinner, and stop it in the callback of the dynamic import (from point 1).

Caveat emptor: I did not try this myself, but it is a pattern that I use very often when loading very large sections of our own app. I just didn’t try doing it with the whole application. I don’t see why it wouldn’t work though.