关于Nuxt3首屏加载loading的做法

看了网上很多资料，但是都无法实现，最后采用纯css的方法实现了效果，利用css的animation，因为使用js代码的话，总要等到客户端js加载完成才执行
但是我的需求是一个假的loading，就是无论多卡，显示一个几秒的loading，优化首屏的显示效果
具体代码：
css:

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: hiden 3s forwards;
  }
   
  .loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #333;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    
  }
   
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes hiden {
    to {
      display: none;
    }
  }

这是layout文件

 <!-- 加载动画 -->
  <div class="loading-overlay" v-if="loading">
    <div class="loading-spinner"></div>
  </div>
  <!-- 默认布局 -->
 <slot />

接下来是页面的骨架屏，这个我还没搞好，搞好后面补上

今天又实现一种新的做法，就是在server plugin 添加到返回的html body中

export default defineNitroPlugin(nitroApp => {
    nitroApp.hooks.hook('render:html', (html, { event }) => {
        html.bodyPrepend.push('<div class="loading-overlay"><div class="loading-spinner"></div></div>');
        html.head.filter(item => console.log(item));
    });
});