startingatlights:inject-data working code example
I use the startingatlights:inject-data
package for other things and it works fine, but it’s not needed for adding a splash screen.
Anyways, this is the working code example for using the inject-data
package
On the server
WebApp.rawConnectHandlers.use(function (req, res, next) {
// for html requests, inject the variable
if (req.headers.accept && req.headers.accept.indexOf('text/html') !== -1) {
InjectData.pushData(req, 'my-variable-name', someDataObject)
}
next();
});
On the client
InjectData.getData('my-variable-name, function (myVariable) {
// now have got the variable on the client
});
loading splash screen code example
There’s no need for the inject-data package if you just want to add a splash screen. All I did was add the loading splash screen div right to my index.html
so that it’s included in the HTML that’s sent to the client, then in the client JS when the app starts you can remove the splash screen.
<body>
<div id="app-wrapper">
<!-- this is the loading screen -->
<div id="app-loading-splash-screen">
<div class='circle-loading-spin'></div>
</div>
<div id="app">
<!--app is rendered here-->
</div>
</div>
</body>
Then in the client startup code you can remove the splash screen
// client application startup
Meteor.startup(async () => {
// the initial index.html file contains a splash screen to cover the page w/a loading spinner
// while the full app is being loaded + parsed. now that app is ready we will remove it
const loadingSplashScreen = document.getElementById('app-loading-splash-screen');
loadingSplashScreen && loadingSplashScreen.classList.add('fadeout'); // this class animates opacity to zero
setTimeout(() => {
loadingSplashScreen && loadingSplashScreen.parentNode.removeChild(loadingSplashScreen);
}, 1000);
});
This example just waits 1 second after the app is loaded before hiding & removing the splash screen, but you could also hide it after all your necessary data is loaded or after any other thing that you need to wait for.