Error loading, too slow and also initialData first 2 times get undefined:

  const [billData, setBillData] = useState<Bill | null>(null)
  const [showDetails, setShowDetails] = useState<any>(false)
  const { user } = getUserLS()

  //TODO -  convert to useReducer
  const { isModalOpen, openModal, closeModal, isInnerModalOpen, openInnerModal, closeInnerModal } = useModal()

  const {
    data: initialData,
    isPending,
    error,
    isError,
  } = useQuery<Bill>({
    queryKey: ['bill_data'],
    queryFn: async () => {
      try {
        // const response = await instance.post(`/api/v1/venues/${params.venueId}/bills/${params.billId}`)
        const response = await instance.get(`/v1/venues/${params.venueId}/bills/${params.billId}`)
        return response.data
      } catch (error) {
        throw new Error(error.response?.data?.message || 'Error desconocido, verifica backend para ver que mensaje se envia.')
      }
    },
    retry: false,
    // staleTime: Infinity,
    // FIXME - Una solucion podria ser que si detecta que hay mas de 1 usuario, solo 1 usuario haga el fetch y los demas esperen a la actualizacion del socket
    // refetchInterval: 15000,
    // refetchIntervalInBackground: true,
    refetchOnWindowFocus: true,
  })

  useEffect(() => {
    // Suponiendo que `params` contiene `venueId` y `billId`
    socket.emit('joinRoom', { venueId: params.venueId, table: initialData?.tableNumber })

    socket.on('updateOrder', data => {
      setBillData(data)
      // Aquí puedes manejar la actualización en el estado del cliente
    })

    // Asegurarse de dejar el room al desmontar el componente
    return () => {
      socket.emit('leaveRoom', { venueId: params.venueId, table: initialData?.tableNumber })
      socket.off('updateOrder')
    }
  }, [params.venueId, initialData?.tableNumber])

  useEffect(() => {
    if (initialData) {
      setBillData(initialData)
    }
  }, [initialData])

  // if (isFetching) return <Loading message="Buscando tu mesa" />

  if (isPending) return <Loading message="Buscando tu mesa" />
  if (isError) return 'An error has occured: ' + error?.message
  if (!billData) return <div>Cargando datos de la factura...</div>

  const [billData, setBillData] = useState<Bill | null>(null)
  const [showDetails, setShowDetails] = useState<any>(false)
  const { user } = getUserLS()

  //TODO -  convert to useReducer
  const { isModalOpen, openModal, closeModal, isInnerModalOpen, openInnerModal, closeInnerModal } = useModal()

  const {
    data: initialData,
    isPending,
    error,
    isError,
  } = useQuery<Bill>({
    queryKey: ['bill_data'],
    queryFn: async () => {
      try {
        // const response = await instance.post(`/api/v1/venues/${params.venueId}/bills/${params.billId}`)
        const response = await instance.get(`/v1/venues/${params.venueId}/bills/${params.billId}`)
        return response.data
      } catch (error) {
        throw new Error(error.response?.data?.message || 'Error desconocido, verifica backend para ver que mensaje se envia.')
      }
    },
    retry: false,
    // staleTime: Infinity,
    // FIXME - Una solucion podria ser que si detecta que hay mas de 1 usuario, solo 1 usuario haga el fetch y los demas esperen a la actualizacion del socket
    // refetchInterval: 15000,
    // refetchIntervalInBackground: true,
    refetchOnWindowFocus: true,
  })

  useEffect(() => {
    // Suponiendo que `params` contiene `venueId` y `billId`
    socket.emit('joinRoom', { venueId: params.venueId, table: initialData?.tableNumber })

    socket.on('updateOrder', data => {
      setBillData(data)
      // Aquí puedes manejar la actualización en el estado del cliente
    })

    // Asegurarse de dejar el room al desmontar el componente
    return () => {
      socket.emit('leaveRoom', { venueId: params.venueId, table: initialData?.tableNumber })
      socket.off('updateOrder')
    }
  }, [params.venueId, initialData?.tableNumber])

  useEffect(() => {
    if (initialData) {
      setBillData(initialData)
    }
  }, [initialData])

  // if (isFetching) return <Loading message="Buscando tu mesa" />

  if (isPending) return <Loading message="Buscando tu mesa" />
  if (isError) return 'An error has occured: ' + error?.message
  if (!billData) return <div>Cargando datos de la factura...</div>