有没有办法显示加载程序，直到在单个spa项目中加载微应用程序

Question

我正在为当前项目使用单个spa，并希望在我的微型应用加载之前拥有一个加载器，并且这些微型应用之间会有一个切换，在这种情况下，我也想显示一个加载器。有什么方法可以达到相同的目的吗？

Answer 1

选项1-单spa布局

请参见https://single-spa.js.org/docs/layout-definition#loading-uis

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