Next.js 13中，如何让结果路由加载页复用着陆页布局以保持动画连贯？

应用概述 #

我正在使用Next.js 13的App Router开发应用，当前简化后的应用结构如下：

app
-(landing)
  - page.js
  - layout.js
-(results)
  - layout.js
  - loading.js
  - results
    - page.js
-components
   - vapourTrails.js

从着陆页提交表单后会跳转至结果页，该页面需要调用API获取数据，因此我设置了loading.js来优化用户体验。我用anime.js制作了一个名为vapourTrails的循环背景动画组件，目前嵌入在着陆页的layout.js中。着陆页通过z轴上方的模糊div让动画处于模糊状态，但跳转至加载页时，我希望移除这个模糊div，同时让动画无缝持续播放。加载完成后显示的结果页不需要vapourTrails动画。

问题 #

该动画需要几秒才能完全显示，目前嵌入在着陆页布局中。我希望结果路由的加载页能复用这个布局，确保动画不中断，但结果页本身需要使用不含该动画的另一个布局。是否可以让页面的加载页用上一页面的布局？当然，任何能实现上述功能的其他方案也欢迎提出。

我曾尝试将vapourTrails动画直接加入results>loading.js，但从landing>page.js跳转至results>loading.js时动画会重新启动。

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