Adsum Loading Screen Component

Usage no npm install needed!

<script type="module">
  import adactiveArcLoadingScreen from 'https://cdn.skypack.dev/@adactive/arc-loading-screen';


react-badge touch-badge

Loading Screen

Screenshot of LoadingScreen component

Getting started

npm i --save @adactive/arc-loading-screen


yarn add @adactive/arc-loading-screen

How to use

Just add the component as below:

import * as React from 'react';


// import LoadingScreen component and Actions
import LoadingScreen, { LoadingScreenActions } from '@adactive/arc-loading-screen';

import ACA from '@adactive/adsum-utils/services/ClientAPI';
import deviceConfig from './services/Config';


class App extends React.Component<PropsType, StateType> {
    state = {
        configLoaded: false,
        mapLoaded: false,


    componentDidMount() {
        // use setPercentage to dispatch LoadingScreen action
        const { setPercentage } = this.props;

            // 10 %
            .then((): void => setPercentage(10))
            .then((): void => ACA.init(deviceConfig.config.api))
            // 25 %
            .then((): void => setPercentage(25))
            .then((): void => ACA.load())
            // 75 %
            .then((): void => setPercentage(75))
            .then(() => {
                this.awm = new AdsumWebMap({/*...*/});

                // 90 %
                this.setState({ configLoaded: true });

    componentDidUpdate() {
        // use setPercentage to dispatch LoadingScreen action
        const { mapState, setPercentage } = this.props;
        const { mapLoaded, configLoaded } = this.state;

        if (configLoaded && !mapLoaded && mapState === 'idle') {
            // 100 %, because app will be ready when mapLoaded set to true
            this.setState({ mapLoaded: true });

    renderMap = () => {/*...*/};

    render(): Element<'div'> {
        return (
            <div className="App">
                <LoadingScreen />

                <Header logo={logo} />

                { this.renderMap() }
const mapStateToProps = (state: AppStateType): MappedStatePropsType => ({
    mapState: state.map.state,

const mapDispatchToProps = (dispatch: *): MappedDispatchPropsType => ({
    // allow us to dispatch LoadingScreen setPercentage action
    setPercentage: (percentage: ?number): void => {

export default connect(

Do not forget to link the reducer to your app root reducer in rootReducer.js:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

// import LoadingScreen reducer
import loadingScreen from '@adactive/arc-loading-screen/src/LoadingScreenReducer';
// import LoadingScreen reducer type
import type { LoadingScreenReducerType } from '@adactive/arc-loading-screen/src/LoadingScreenReducer';

export type AppStateType = {|
    loadingScreen: LoadingScreenReducerType,

const appState: AppStateType = {

export default combineReducers(appState);

Be sure to have adsum-logo.png in your public/assets/img/ folder if you want the default logo

Optional props

type OwnPropsType = {|
    open?: boolean,
    hideLogo?: boolean,
    hidePercentage?: boolean,
    hideBar?: boolean,
    transition?: ?string,
    minPercentage?: ?number,
    mainColor?: string,
    barColor?: string,
    logo?: Object | string,


Control the opening of the loading screen. Note that Loading Screen closes automatically when it reaches 100%, so NO NEED to link mapLoaded to open prop as below if you set percentage to 100% at some point in your code:

    open={!mapLoaded} // not needed


Hide Logo in the Loading Screen when set to true.


Hide Percentage number in the Loading Screen when set to true.


Hide Loading Bar in the Loading Screen when set to true.


Set transition of the Loading Bar width. Can be useful to adjust transition duration: if Loading Screen is going to be displayed for a long time, we have enough time to set a bigger transition duration for a prettier design. On the contrary, timing needs to be low when Loading Bar loads quickly.


Set minPercentage. Set percentage in redux store is used only when greater than minPercentage. This is a sort of design workaround for the rounded radius and padding getting messed up when Loading Bar is too small.


Set Loading Screen background color.


Set Loading Bar & percentage color.


Set displayed logo. Better effect with a PNG file with transparent background.


type LoadingScreenReducerStateType = {|
    percentage: ?number,

The only value in the Loading Screen redux store is percentage.

2 actions are available:

  • setPercentage: set percentage to the given value.

    LoadingScreenActions.setPercentage(80); // set percentage to 80 %

  • addPercentage: add the given value to the current percentage.

    LoadingScreenActions.setPercentage(10); // set percentage to 10 %


    LoadingScreenActions.addPercentage(20); // percentage is now 30 %

Default props

static defaultProps = {
    open: true,
    hideLogo: false,
    hidePercentage: false,
    hideBar: false,
    transition: 'width .1s ease-in-out',
    minPercentage: 10,
    mainColor: '#6EC8F1', // same blue color as splashscreen in Adsum AdLoader
    barColor: 'white',
    logo: '/assets/img/adsum-logo.png',

Copy component inside your project src folder

It will copy the component inside your project, in src/components/adsum-loading-screen/.

npx @adactive/arc-loading-screen copy