Is there any way to show a loader till micro apps getting loaded in single spa project

Question

I am using single spa for my current project and want to have a loader till my micro app gets loaded and there will be a switch between these micro apps , in that case also I want to show a loader. Is there any way to achieve the same?

Answer 1

Option 1 - single-spa-layout

See https://single-spa.js.org/docs/layout-definition#loading-uis

Option 2 - Implement it in your loading function

import { registerApplication } from 'single-spa';

registerApplication({
  name: "app1",
  app: loadApp1,
  activeWhen: '/'
})

function loadApp1() {
  return Promise.resolve().then(() => {
    placeLoader()
    return System.import('app1')
  }).then(app => {
    removeLoader()
    return app;
  })
}

function placeLoader() {
  document.body.appendChild(
    Object.assign(document.createElement('img'), {
      id: 'single-spa-loader',
      src: "loading.gif"
    })
  })
}

function removeLoader() {
  document.getElementById('single-spa-loader').remove()
}