+Loading.jsx not working

[bitliner]

The feature is documented here

However it seems not working, or not clear how to use it.

In my project, I've created a +Loading.jsx file as documented, but the component or layout is never shown.

Does it require manual integration? Or vike-react automatically integrates it?

[brillout]

Indeed, it's poorly documented. It's used by vike-react-{query,apollo}, see for example https://github.com/vikejs/vike-react/tree/main/packages/vike-react-query#withfallback. I'll update the docs.

[bitliner]

More clear now, thanks. Still a question: looking at vike-react-query documentation, is it correct to say that if you use vike-react-query then the data hook from vike should not be used?

[brillout]

Yes, see https://github.com/vikejs/vike-react/tree/main/packages/vike-react-query#how-it-works.

[brillout]

The docs are now much improved. See

• https://vike.dev/Loading
• https://github.com/vikejs/vike-react/tree/main/packages/vike-react-apollo#basic-usage

[micah-redwood]

I recently upgraded to the latest vike-react and was surprised to see a new render-blocking CSS file on every page with the following content:

@keyframes vike-react-shine{to{background-position-x:-200%}}

I'm using pre-rendering with static HTML output, so I'm not sure if/when this CSS would ever be used? Would be great if this sort of functionality was opt-in, as it seems like a performance footgun otherwise. Obviously the amount of bytes are negligible, but the fewer render-blocking CSS files the better.

I tried updating +Loading.tsx to disable both components (e.g. returning <></>) but I couldn't get this new CSS file to go away.

[brillout]

(In case you're curious: #1945 (reply in thread).)

[micah-redwood]

Correct me if I'm wrong, but that isn't what I expect: I expect the CSS to only apply if you have an element that uses the CSS animation vike-react-shine.

Yeah, I 100% agree this is not expected behavior. I am using <Suspense /> in some child components, but I always provide custom fallbacks. I never use it top level. Even on pages that have no suspending children, I see this CSS as well.

[brillout]

The CSS is always loaded, that isn't fixable (see links in my previous comments).

But that's okay because this superfluous extra line of CSS doesn't impact performance — that's my point.

[micah-redwood]

Ah, sorry I missed that link.

Makes sense that this CSS needs to always be included. Just would be nice if it could be included in the existing CSS file(s) and not in a separate render-blocking file, however small. I understand that w/ HTTP/2 and CDNs, this is typically not a perf issue. But it will introduce latency when a service worker (e.g. workbox) is preloading a new releases' assets 1-by-1, and in the very rare case that it fails to load due to a network issue, it'll slow down critical path rendering.

TLDR: not a big deal but if there was a way to include it in the main CSS bundle that would be ideal. Thanks as always for you hard work on this awesome framework.

[brillout]

I agree the CSS should be bundled. It isn't currently possible because of #1815. We'll be able to bundle CSS once Rolldown replaces Rollup.