How to use react-redux-loading-bar - 10 common examples

export function* getTrialsListOfJob(action) {
    try {
        // Get Trials list and display notification 
        yield put(showLoading()) 
        const token = yield select(getToken)
        yield call(getJobsList, action)
        console.log("Getting Trials List of Job")
        const trialsList = yield call(api.requestTrialsOfJob, {}, token, action.app, action.appVersion) 
        yield put(actions.populateTrialsToJobs(trialsList.data, action.app, action.appVersion))
        yield put(hideLoading())
    } catch(e) {
        console.error(e.response)
        console.error(e)
        yield put(notificationShow("Failed to Fetch TrialsList"))
    }
}

export function* getTrialsListOfJob(action) {
    try {
        // Get Trials list and display notification 
        yield put(showLoading()) 
        const token = yield select(getToken)
        yield call(getJobsList, action)
        console.log("Getting Trials List of Job")
        const trialsList = yield call(api.requestTrialsOfJob, {}, token, action.app, action.appVersion) 
        yield put(actions.populateTrialsToJobs(trialsList.data, action.app, action.appVersion))
        yield put(hideLoading())
    } catch(e) {
        console.error(e.response)
        console.error(e)
        yield put(notificationShow("Failed to Fetch TrialsList"))
    }
}

function* createDataset(action) {
    const {name, task, file, dataset_url} = action
    try {
        yield put(showLoading())
        const token = yield select(getToken)
        yield call(api.postCreateDataset, name, task, file, dataset_url, token)
        console.log("Create Dataset success")
        yield alert("Create Dataset success")
        yield put(notificationShow("Create Dataset Success")); // no need to write test for this 
        yield(push('console/datasets/list-dataset'))
        yield put(hideLoading())
    } catch(e) {
        console.error(e.response)
        console.error(e)
        console.error(e.response.data)
        yield put(notificationShow("Failed to Create Dataset"));
    }
}

// Get the content types from the redux state
    const contentTypes = yield select(contentTypesSelector);
    // Extract the content type from the content data
    const contentType = extractContentType(content);
    // Map the content type to the human-readable name
    const contentName =
      mapContentTypeToName(contentTypes, contentType) || 'unknown';

    yield put(push('/admin/content'));
    yield put(setSuccessMessage(`New ${contentName} added successfully`));
  } catch (error) {
    const errorMessage = yield ApiError.errorToHumanString(error);
    yield put(setErrorMessage(errorMessage));
  } finally {
    yield put(hideLoading());
  }
}

},
        method: 'PATCH',
      },
    );
    yield put(setMessage('Changes have been saved', MESSAGE_SUCCESS));
    yield put({
      type: SIMPLE_CONFIG_POSTED,
      payload: {
        name,
        config,
      },
    });
  } catch (error) {
    yield put(setMessage(error.toString()));
  } finally {
    yield put(hideLoading());
    if (yield cancelled()) {
      // do a thing
    }
  }
}

function* loadRoles() {
  try {
    yield put(resetLoading());
    yield put(showLoading());
    const roles = yield call(api, 'roles');
    yield put({
      type: ROLES_LOADED,
      payload: {
        roles,
      },
    });
  } catch (error) {
    const errorMessage = yield ApiError.errorToHumanString(error);
    yield put(setErrorMessage(errorMessage));
  } finally {
    yield put(hideLoading());
    if (yield cancelled()) {
      // do a thing
    }
  }

function* loadSimpleConfig({ payload: { name } }) {
  try {
    yield put(resetLoading());
    yield put(showLoading());
    const config = yield call(api, 'simple_config', { $name: name });
    yield put({
      type: SIMPLE_CONFIG_LOADED,
      payload: {
        name,
        config,
      },
    });
  } catch (error) {
    yield put(setMessage(error.toString()));
  } finally {
    yield put(hideLoading());
    if (yield cancelled()) {
      // do a thing
    }

function* postSimpleConfig({ payload: { name, config } }) {
  try {
    yield put(resetLoading());
    yield put(showLoading());

    const csrfToken = yield api('csrf_token');
    // @todo It feels like this should be moved into the api wrapper.
    yield api(
      'simple_config',
      { $name: name },
      {
        body: JSON.stringify(config),
        headers: {
          'content-type': 'application/json',
          'X-CSRF-Token': csrfToken,
        },
        method: 'PATCH',
      },
    );

function* addContent({ payload: { content } }) {
  try {
    yield put(resetLoading());
    yield put(showLoading());

    yield all([
      call(api, 'node:add', { parameters: { node: content } }),
      put(requestContentTypes()),
    ]);

    // Get the content types from the redux state
    const contentTypes = yield select(contentTypesSelector);
    // Extract the content type from the content data
    const contentType = extractContentType(content);
    // Map the content type to the human-readable name
    const contentName =
      mapContentTypeToName(contentTypes, contentType) || 'unknown';

    yield put(push('/admin/content'));

import promiseMiddleware from 'redux-promise-middleware'
import { createLogger } from 'redux-logger'
import {
  createStore,
  applyMiddleware,
  compose,
} from 'redux'
import { loadingBarMiddleware } from 'react-redux-loading-bar'

import rootReducer from './reducer'

const createStoreWithMiddleware = compose(
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    promiseMiddleware(), // resolves promises
    loadingBarMiddleware(), // manages loading bar
    createLogger(), // log actions in console
  ),
)(createStore)

const store = createStoreWithMiddleware(rootReducer)

export default store