Image Loader
Unanswered
Blue Picardy Spaniel posted this in #help-forum
Blue Picardy SpanielOP
I have a skeleton loader, how do I make the skeleton loader show until the image loads?
11 Replies
@Blue Picardy Spaniel I have a skeleton loader, how do I make the skeleton loader show until the image loads?
use
loading.tsx or export default function Page() {
return (
<Suspense fallback={<Skeleton />}>
<Content />
</Suspense>
)
}
async function Content() {
const data = await fetchData()
return ()
}@Ray use `loading.tsx` or
ts
export default function Page() {
return (
<Suspense fallback={<Skeleton />}>
<Content />
</Suspense>
)
}
async function Content() {
const data = await fetchData()
return ()
}
Blue Picardy SpanielOP
will this work with an image as opposed to a http request?
@Blue Picardy Spaniel will this work with an image as opposed to a http request?
oh sorry, just saw your said image
@Ray oh sorry, just saw your said image
pls read the question carefully xD
@Blue Picardy Spaniel I have a skeleton loader, how do I make the skeleton loader show until the image loads?
something like this
"use client";
import { useEffect, useState } from "react";
export function CustomImage({ src }: { src: string }) {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const img = new Image();
img.onload = () => {
setLoaded(true);
};
img.src = src;
}, [src]);
if (!loaded) return <Skeleton />;
return <img src={src} alt="" />;
}Blue Picardy SpanielOP
ty
@!=tgt why img component btw
Example
but next/image is recommended
@!=tgt but next/image is recommended
Please share an example how to make next/image work with custom image skeleton then