Help with Rendering in loading.tsx
Answered
Araucanian herring posted this in #help-forum
Araucanian herringOP
Hi, I can't seem to render Rive animation or even and AntD Spinner within the loading.tsx, it just doesn't show anything..
I'm using nextjs 14 with App router...
I'm using nextjs 14 with App router...
31 Replies
Araucanian herringOP
page.tsx
export default async function Page() {
await new Promise((resolve) => setTimeout(resolve, 5000));
return <div>Hello World</div>;
}
loading.tsx
import { Spin } from "antd";
export default function Loading() {
return (
<div className="flex items-center border-2 border-solid border-red-500">
<div className="flex items-center justify-center h-screen">
<Spin size="large" />
</div>
</div>
);
layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
export default async function Page() {
await new Promise((resolve) => setTimeout(resolve, 5000));
return <div>Hello World</div>;
}
loading.tsx
import { Spin } from "antd";
export default function Loading() {
return (
<div className="flex items-center border-2 border-solid border-red-500">
<div className="flex items-center justify-center h-screen">
<Spin size="large" />
</div>
</div>
);
layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Araucanian herringOP
you see the antd loader spins? I've tried in two different nextjs applications I Have:|
sec I'll do it..
Araucanian herringOP
which react and nextjs you use btw?
@Araucanian herring you see the antd loader spins? I've tried in two different nextjs applications I Have:|
Ah! the loading.tsx works perfectly but not the AntD Spinner
sounds like an issue with the library
Try triggering the loading suspense by delaying longer
and inspecting element the page and see if the AntD <div> is there
Araucanian herringOP
I Actually wanted to render Rive componenet, but it's the same issue (also tried to preload the WASM)
same answer
try rendering something else in the loading.tsx
Araucanian herringOP
it does render stuff.. just not something dynamic as spinner of antd and rive.. but why not? and what should the library "give" for this? it seems like it always tries to render as a server component
@Araucanian herring it does render stuff.. just not something dynamic as spinner of antd and rive.. but why not? and what should the library "give" for this? it seems like it always tries to render as a server component
hey, lets confirm first if it does render it by inspecting the element. is the Div there?
Araucanian herringOP
oh sec
Araucanian herringOP
Yeah actually it there;
(1) <div class="ant-spin ant-spin-lg ant-spin-spinning css-dev-only-do-not-override-pvhx14" aria-live="polite" aria-busy="true"><span class="ant-spin-dot-holder"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></span></div>
it's weird I've tried to put it in page.tsx with the Hello world.. it doesn't show the spinner
but when I also put AntD <Spin ...> It suddenly shows both the (1) and the Spinner
(1) <div class="ant-spin ant-spin-lg ant-spin-spinning css-dev-only-do-not-override-pvhx14" aria-live="polite" aria-busy="true"><span class="ant-spin-dot-holder"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span></span></div>
it's weird I've tried to put it in page.tsx with the Hello world.. it doesn't show the spinner
but when I also put AntD <Spin ...> It suddenly shows both the (1) and the Spinner
Maybe need to try preload antd ?
(though I'm not sure yet how to do it)
Araucanian herringOP
actually i only have <ConfigProvider of antd. sec im checking with this
Amazing! 😊 Yeah should have check for this, sorry.. but like I said I actualy created an animation with Rive that I want to integrate within the loading.tsx..
I wonder what that AntdRegistry does:O
with Rive.. I've tried adding to the layout.tsx:
<head>
<link
rel="preload"
href="/rive/rive.wasm"
as="fetch"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/rive/loader.riv"
as="fetch"
crossOrigin="anonymous"
/>
</head>
I wonder what that AntdRegistry does:O
with Rive.. I've tried adding to the layout.tsx:
<head>
<link
rel="preload"
href="/rive/rive.wasm"
as="fetch"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/rive/loader.riv"
as="fetch"
crossOrigin="anonymous"
/>
</head>
I've added to my public/ rive/rive.wasm and the rive/loader.riv - It shows in page.tsx.. but not on loading.tsx
Araucanian herringOP
Yep:)
Is there a chance you can help me also with the Rive?
the AntD was a way for sanity check
create a new thread because the rive thing is a different problem with different answer
(i think iknow why)
Araucanian herringOP
okay.. I'll open a new one:)