Javascript ASP.NET MVC和Angular 4迷你SPA-页脚问题

应用程序背景：我的应用程序是使用ASP.net MVC（.net framework 4.6）和几个Angular 4迷你SPA构建的

迷你SPA是从其中一个视图加载的，比如

Subscription.cshtml

。请注意我在下面代码中的评论：

@section styles{
    <link href="~/apps/userSubscription/styles.e8e9c3a3817e92de1e39.bundle.css" rel="stylesheet" />
}
@*This is mini SPA*@
<sb-subcription-app-root>
    @*This is loader to show while mini SPA is bootstrapped*@
    <div class="loading-icon">
        <div class="text-center">
            <i class="fa fa-spinner fa-spin fa-fw" style="font-size:55px;"></i>
        </div>
    </div>
</sb-subcription-app-root>

@section scripts{
    <script src="~/apps/userSubscription/inline.4306fb1489008775a724.bundle.js"></script>
    <script src="~/apps/userSubscription/polyfills.b92561b85131ad96e15f.bundle.js"></script>
    <script src="~/apps/userSubscription/vendor.d7d84c623190e8bb1494.bundle.js"></script>
    <script src="~/apps/userSubscription/main.c9d275f7937435642d76.bundle.js"></script>
}

问题描述：

加载视图

Subscription.cshtml

时。用户界面如下图所示。我相信现在我的angular应用程序已经启动了

angular应用程序启动后，加载程序消失（我认为这是正确的），然后将页脚推到顶部2-3秒，直到加载DOM，如图所示

---

我需要什么：我想隐藏页脚，直到加载DOM（包括angular mini SPA）。任何CSS和JS解决方案都适合我。

作为一种解决方法，您可以尝试以下方法

1） 默认情况下隐藏页脚：

<footer class="footer hide" id="footer">

如您所见，我们只是在呈现了一些（需要的）元素并可通过

文档
访问之后显示页脚。这个解决方案有点老套，我建议您寻找一种更适合您的情况和环境的方法。这需要更深入的研究：


谁加载延迟2-3秒的DOM
如果这是Angular应用程序的责任，那么应用程序必须处理这个过程
这个过程可能不仅仅是一个原始的轮询，例如延迟实体本身可能会告诉我们它已经完成了
也许这个活动就足够了？（启动时只显示页脚）
有什么建议/帮助吗？
<footer class="footer hide" id="footer">

<div id="bootstraper">

(function() {
  var timer = setInterval(function() {    
     if(document.getElementById('bootstraper')) {
       clearInterval(timer);
       document.getElementById('footer').classList.remove("hide");
     }
  }, 40);
})();