微前端架构下统一Loader动画实现方案技术问询

核心思路 #

以宿主容器掌控全局Loader显示逻辑为核心，子应用保留自身Loader但仅在无宿主Loader时触发，同时确保宿主核心功能可提前开放交互。

具体实现步骤 #

1. 宿主容器层面Loader控制 #

• 全局维护加载状态管理模块（可通过发布订阅、状态库或自定义事件实现），记录两个关键状态：
  • hostLoaded: 宿主核心功能（头部导航、用户信息等）是否加载完成
  • activeAppsLoading: 当前激活的子应用是否处于加载中
• 宿主Loader显示规则：仅在hostLoaded为false 或 activeAppsLoading为true时显示；两者均为false时隐藏。
• 宿主核心功能加载完成后立即将hostLoaded设为true，此时即便子应用仍在加载，头部导航等功能直接开放交互，无需等待子应用就绪。

2. 子应用适配改造 #

• 子应用保留自身Loader逻辑，但触发前先检查宿主全局状态：
  • 若宿主Loader正在显示（hostLoaded为false或activeAppsLoading为true），则不触发自身Loader
  • 仅当宿主已完全加载（hostLoaded为true）且无其他子应用加载时，才显示自身Loader
• 子应用加载开始/完成时，通过宿主提供的API通知宿主更新activeAppsLoading状态。

3. 特殊场景处理（宿主未加载完成但子应用已展示） #

• 宿主加载核心功能期间，将子应用挂载容器设为不可交互状态（添加半透明遮罩或禁用事件），但保留宿主头部导航的可交互性
• 待宿主hostLoaded变为true后，移除子应用容器的禁用状态，同时隐藏全局Loader
• 若子应用已提前加载完成，宿主就绪后直接显示内容，无需额外等待

4. 兼容现有逻辑 #

• 子应用无需删除自身Loader，仅需增加宿主状态判断逻辑，确保独立运行时（不嵌入宿主）仍能正常使用自身Loader
• 宿主Loader样式统一设计，覆盖子应用局部Loader，避免视觉冲突

理想场景适配 #

• 场景B（宿主加载完成，子应用加载中）：hostLoaded为true，activeAppsLoading为true，全局Loader显示，宿主导航正常交互，子应用自身Loader被抑制
• 场景C（宿主与子应用均加载中）：hostLoaded为false，activeAppsLoading为true，仅显示宿主全局Loader，宿主导航可开放基础交互，子应用Loader不触发

已尝试方案优化建议 #

在你现有方案基础上补充以下调整：

• 给宿主状态管理模块添加子应用加载状态监听能力
• 子应用接入宿主状态通知API，替代独立的Loader触发逻辑
• 将宿主Loader的隐藏逻辑从「仅自身加载完成隐藏」改为「自身加载完成且无活跃子应用加载时隐藏」

内容的提问来源于stack exchange，提问作者YaronGlp