Looking for a state to describe "beforeLoad"

[My0sot1s]

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher);
 
 
  if (isLoading) return <div className="skeleton" />;
  if (data?.length === 0) return <div className="empty"> no result </div>
 
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

As described in the example above, I want to display a “no result” empty state when the fetched data is empty. However, before the data fetching begins — during the initial React render — both isLoading and isValidating are false, which means I can’t return a loading state. As a result, the component mistakenly renders the empty state. How can I correctly detect the state where “the request has not yet started”?