Есть ли способ показать загрузчик, пока микроприложения не загрузятся в одном проекте спа?

Question

Я использую один спа-центр для своего текущего проекта и хочу иметь загрузчик, пока мое микроприложение не загрузится и не будет переключаться между этими микроприложениями, в этом случае я также хочу показать загрузчик. Есть ли способ добиться того же?

Answer 1

Вариант 1 - однокомнатная спа-планировка

См. https://single-spa.js.org/docs/layout-definition

Вариант 2. Реализуйте это в своей функции загрузки.

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()
}