How to use nprogress package to show a loading top-bar on Vike?

[Blankeos]

The description is the title. I want to add a top-bar for loading. I'm currently on SolidJS though.

[phonzammi]

Hi @Blankeos,
First, you need to install nprogress. Run npm install nprogress or pnpm add nprogress. Additionally, if you are using TypeScript, install the types with npm install -D @types/nprogress or pnpm add -D @types/nprogress.
Next, import the CSS by adding import "nprogress/nprogress.css" inside your LayoutDefault.tsx file.

To show the top-bar loading when navigating between pages, use it with the +onPageTransitionStart and +onPageTransitionEnd hooks.

For example:

// +onPageTransitionStart.ts
import type { OnPageTransitionStartAsync } from "vike/types";
import NProgress from "nprogress"

export const onPageTransitionStart: OnPageTransitionStartAsync = async () => {
  console.log("Page transition start");
  NProgress.start();
};

//+onPageTransitionEnd.ts
import type { OnPageTransitionEndAsync } from "vike/types";
import NProgress from "nprogress"

export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
  console.log("Page transition end");
  NProgress.done();
  NProgress.remove();
};

[Blankeos]

Thanks for the quick response!

[phonzammi]

Happy to help

[Blankeos]

Managed to do it.

Repo: https://github.com/Blankeos/hono-trpc

Example above uses:

• Hono + tRPC (separate backend)
• Vike + Solid + Tanstack Query (Has SSR via dehydrate & hydrate) + Nprogress

vike-ssr-solid-nprogress.mp4

I'll let you close this one. Let me know if you want examples of this added onto the docs or smth. (out of topic on nprogress but..) this roughly took me roughly 7 hours of just fiddling around lol (specifically for SSR). Solid has no docs on hydration so I sort of took inspiration from this Vike React Query SSR Example.

[phonzammi]

Very nice, thanks for sharing

[brillout]

✨ Neat, thanks, I added your example to the docs 140867c.