@team-griffin/redux-page-loader

v1.2.0

Published

2 years ago

```sh npm install --save @team-griffin/redux-page-loader ```

Downloads

0High
0Medium
0Low

redux-page-loader

npm install --save @team-griffin/redux-page-loader

yarn add @team-griffin/redux-page-loader

This 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 store

Loaded 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());

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme