超过页面加载时间阈值时的 SvelteKit 加载指示器

Posted

技术标签:

【中文标题】超过页面加载时间阈值时的 SvelteKit 加载指示器【英文标题】:SvelteKit loading indicator when a page load time threshold is exceeded 【发布时间】:2022-01-10 00:59:46 【问题描述】:

我正在将 SvelteKit 用于主要是服务器端呈现页面的网站。 SvelteKit 上的客户端导航效果很好,而且超级活泼。但是,有时在路由load()函数中调用后端服务器时,由于数据库长尾延迟,响应不是即时的,可能是几秒钟。

创建仅在加载时间不是即时(低于 200 毫秒)时才显示的加载指示器的最佳方法是什么?我知道通用的navigating 模式,但我特别希望创建一个加载指示器,除非页面加载不是即时的,否则不会触发。

【问题讨论】:

【参考方案1】:

Sveltekit 有一个名为“navigating”的存储变量,它从字面上指示客户端是否在加载页面之间。来自Sveltekit docs:

navigating 是一个可读存储。导航开始时,其值为 from, to ,其中fromto 都反映了页面存储值。什么时候 navigating 结束,其值恢复为 null

请注意,如果您的页面是预渲染的,它应该是“即时的”,因此不会显示加载指示器。如果不是,只要您的内容被获取和/或呈现,这个“导航”变量就不会为空。如果您愿意,您可以让“Spinner”组件不显示任何内容...直到 200 毫秒后(使用 setTimout 计时器)...听起来您确实想要。

这是我过去使用的包装器组件的示例实现(请原谅 tailwindcss 语法...我复制并粘贴了它)。您可以在 __layout.svelte 中自定义此想法,或者使用此 #if $navigating 逻辑包装组件或整个“页面”:

<script>
// USE THIS:
import  navigating  from '$app/stores'
// Example spinner/loading component is visible (when $navigating != null):
import Spinner from '$lib/design/Spinner.svelte'
...
</script>

  <main class="py-4">
    <div class="pagePaddingMain flex-col">
      #if title
        <h1 class="text-4xl text-center text-cText pb-4 sm:text-5xl">title</h1>
      /if
      #if $navigating <!-- LOOK HERE -->
        <div class="m-8">
          <Spinner />
          <h1 class="ext-3xl text-center text-cText">Fetching title...</h1>
        </div>
      :else
        <slot />
      /if
    </div>
  </main>

就是这样。祝你好运!

【讨论】:

感谢您的跟进。仅供参考,因为这是一个老问题,我在这里实现了我的解决方案:github.com/tradingstrategy-ai/frontend/blob/master/src/lib/… - 你可以看到正在运行的进度条,例如如果clicking any of the blockchain links here

以上是关于超过页面加载时间阈值时的 SvelteKit 加载指示器的主要内容,如果未能解决你的问题,请参考以下文章

我的 SvelteKit 项目中的“无服务器功能”经常出现错误

页面加载时的引导模式打开 [重复]

渲染页面/加载所有组件时的事件

页面加载特定URL时的Jquery addClass

页面加载时的随机图像

加载数据时的 iOS 启动页面