message: fix: ssr issue with image hook
diff: import { useSafeLayoutEffect } from "@chakra-ui/hooks"
  -import * as React from "react"
  +import { isBrowser } from "@chakra-ui/utils"
  +import { useState, useRef, useEffect, useCallback } from "react"
  export type UseImageProps = {
  /**
  @@ -62,17 +63,23 @@ export function useImage(props: UseImageProps) {
  ignoreFallback,
  } = props
  - const [status, setStatus] = React.useState<Status>(() => {
  + /**
  + * Ignore this fallback complete in an SSR environment
  + * so the `src` doesn't get missing in SSR.
  + */
  + const ignore = ignoreFallback || !isBrowser
  +
  + const [status, setStatus] = useState<Status>(() => {
  return src ? "loading" : "pending"
  })
  - React.useEffect(() => {
  + useEffect(() => {
  setStatus(src ? "loading" : "pending")
  }, [src])
  - const imageRef = React.useRef<HTMLImageElement | null>()
  + const imageRef = useRef<HTMLImageElement | null>()
  - const load = React.useCallback(() => {
  + const load = useCallback(() => {
  if (!src) return
  flush()
  @@ -120,7 +127,7 @@ export function useImage(props: UseImageProps) {
  * If user opts out of the fallback/placeholder
  * logic, let's bail out.
  */
  - if (ignoreFallback) return
  + if (ignore) return
  if (status === "loading") {
  load()
  @@ -128,13 +135,13 @@ export function useImage(props: UseImageProps) {
  return () => {
  flush()
  }
  - }, [status, load, ignoreFallback])
  + }, [status, load, ignore])
  /**
  * If user opts out of the fallback/placeholder
  * logic, let's just return 'loaded'
  */
  - return ignoreFallback ? "loaded" : status
  + return ignore ? "loaded" : status
  }
  export type UseImageReturn = ReturnType<typeof useImage>
  