I'm trying to show spinners while images load on a Next.js site. I'm using NextUI as the UI library.

I have a bunch of cards on the site, and want to show a spinner while the image loads. I have tried with a React hook and ternary operator:

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'/>
        )}

("Loader" is correct, I have renamed the "Loading" from the UI library)

I have also tried using Next's blurDataUrl property, which also does not seem to work.