import { useState } from 'react'

export function useSkeleton(isLoading: boolean) {
  // Track render phase: 0=never shown, 1=showing now, 2=already shown
  const [phase, setPhase] = useState(() => (isLoading ? 1 : 0))

  // Transition from phase 0 to 1 when loading starts
  if (isLoading && phase === 0) {
    setPhase(1)
  }

  // Transition from phase 1 to 2 when loading ends (skeleton was shown, now done)
  if (!isLoading && phase === 1) {
    setPhase(2)
  }

  // Show skeleton only in phase 1 (first time loading)
  return phase === 1
}