nextjs Image - How to use mui Skeleton as the loader?

Question

Here is nextjs example to use a custom loader which is an image.

mui already has a skeleton or even many icons that could be used.

import Skeleton from '@mui/material/Skeleton';

How to use a mui skeleton instead of an image?

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Answer 1

SEO Optimized ✅

I've used the skeleton loader from Material UI in this case!

'use client'
import Image from "next/image"
import { useState } from "react"
import { Skeleton } from "@mui/material"

export default function Component() {
    const [loaded, setLoaded] = useState(false)
return (
    <div className="relative">
        <Image src="____" 
            fill 
            className={`${(!loaded) ? 'opacity-0' : 'opacity-100'}}`} 
            onLoadingComplete={()=>setLoaded(true)}
        />
        {!loaded && (
            <Skeleton
                sx={{ bgcolor: 'grey.100' }}
                variant="rectangular"
                width="100%"
                height="100%"
            />
        )}
    </div>
)}

Answer 2

Use the Suspense component.

import { Suspense } from "react";

export default function Component() {
    return (
        <Suspense fallback={<Skeleton />}>
            <MyImage ... />
        </Suspense>
    );
}

Reference doc