'use client'

import Image from 'next/image'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import { useState } from 'react'

export default function Home() {
  const [ isLoaded, setIsLoaded ] = useState(false)
  return (
    <main className="bg-black h-screen">
      <div className="absolute top-0 left-0 w-full h-full">
        {!isLoaded && <Skeleton height={500} width={500} />}
        <Image 
          src="https://api.daad.wtf/discord/user/1104076205105365064/avatar"
          width={500}
          height={500}
          alt="Avatar"
          onLoad={() => setIsLoaded(true)}
        />
      </div>
    </main>
  )
}

Is there a better way to do this - I notice that the image loads which goes underneath the skeleton, I onlywant to show the full image once it is loaded.

This is my first time using NextJS so sorry lol