有没有办法在单个 spa 项目中加载微型应用程序之前显示加载器

Question

我正在为我当前的项目使用单个水疗中心，并希望有一个加载器，直到我的微应用程序被加载并且这些微应用程序之间会有一个切换，在这种情况下，我也想显示一个加载器。有没有办法达到同样的效果？

Answer 1

选项 1 - 单水疗布局

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