redux-page-loader
npm install --save @team-griffin/redux-page-loaderyarn add @team-griffin/redux-page-loaderThis module allows you to embed static html into your page, and then when the page is ready to be shown easily remove it.
Requirements
- redux
- redux-most
Usage
Static HTML
Your static html and css should live within your own project, and how you put it into the page is your own choice. We recommend using webpack with the html plugin.
For example:
// static.js
module.exports = {
html: () => {
return `
<div class="page-loader">
<div class="fancy-spinner"></div>
</div>
`;
},
css: () => {
return `
<style>
.page-loader > .fancy-spinner {
background: red;
}
</style>
`;
}
};
// webpack.config
const HtmlWebpackPlugin = require('html-webpack-plugin');
const staticPageLoader = require('../somelocation/static');
new HtmlWebpackPlugin({
...
pageLoader: {
css: staticPageLoader.css(),
html: staticPageLoader.html(),
}
})
// index.ejs
<head>
...
<%= htmlWebpackPlugin.options.pageLoader.css %>
</head>
<body>
<div id="root"></div>
<%= htmlWebpackPlugin.options.pageLoader.html %>
</body>Static Page Destroyer
You obviously want to remove the static html from the page at some point. This package takes care of actually removing the element from the DOM, but it gives you a chance to handle how to tranisition it out before it is removed.
Page Guard
We provide a component which will not render your component until the page is ready. Once it has determined the page is ready it will render your component behind the static page until the static page is removed.
This is a connected component.
<PageGuard
renderPage={() => (
<MyComponent/> // <-- This is your application
)}
renderDestroyer={() => (
<MyDestroyer/>
)}
/>Setup
This module uses epics to handle business logic, and reducers to handle state. If you instead prefer to have it setup as a middleware that option is also available.
Method 1 - redux-most epics
// Reducer
import {
reducer as pageLoader,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-page-loader';
combineReducers({
[REDUCER_MOUNT_POINT]: pageLoader,
});
// Epics
import { createEpicMiddleware, combineEpics } from 'redux-most';
import { pageLoaderEpics } from '@team-griffin/redux-page-loader';
createEpicMiddleware(combineEpics([
pageLoaderEpics,
]));Method 2 - redux middleware
// Reducer
import {
reducer as pageLoader,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-page-loader';
combineReducers({
[REDUCER_MOUNT_POINT]: pageLoader,
});
// Epics
import { middleware } from '@team-griffin/redux-page-loader';
// Add middleware to the storeLoaded and Configuration
There is a signal to update the module configuration.
The default config is:
{
delay: 2000, // How long the transition takes (before being removed)
domSelector: '.page-loader', // How to find the element to remove
}Changing the config
import { signals } from '@team-griffin/redux-page-loader';
store.dispatch(signals.configure({
delay: 1000,
}));Somewhere in your logic your application will have determined it is ready. You can signal that your application is loaded via:
import { messages } from '@team-griffin/redux-page-loader';
store.dispatch(messages.loaded());