Estoy tratando de mostrar los giradores mientras las imágenes se cargan en un sitio Next.js. Estoy usando NextUI como biblioteca de interfaz de usuario.

Tengo un montón de tarjetas en el sitio y quiero mostrar una ruleta mientras se carga la imagen. Lo he intentado con un gancho React y un operador ternario:

 import Loader from '../components/Loader'
import spinner from '../public/images/spinner.svg'

const Item = ({ item }) => {

 const [isLoading, setIsLoading] = useState(false);
 
 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 const result = await {item}; 
 setIsLoading(false);
 };
 fetchData();
 }, []);
 
 return (
 <Link href={`/item/${item.id}`}>
 <Card flat isHoverable isPressable css={{ mw: "400px", alignContent: 'center'}}>
 {isLoading ? (
 <Loader />
 ) : (
 <Card.Image src={item.pic} alt={item.id} layout='responsive' css={{ alignContent: 'center'}} placeholder='blur' blurDataURL='/../public/images/spinner.svg'/>
 )}

("Cargador" es correcto, he cambiado el nombre de "Cargando" de la biblioteca de la interfaz de usuario)

También he intentado usar la propiedad blurDataUrl de Next, que tampoco parece funcionar.