How should I handle loading and empty state in this case?

[devhyunjae]

This could be the happiest case if data returns 3 type
null => loading
[] => empty
[{id: 1}, {id: 2}] => fetched success

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/users', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  if (data.length === 0) return <div>empty</div>
  return do something with data;
}

BUT the current api response only 2 type
null => when empty
[{id: 1}, {id: 2}] => when have query data

Which means, as the frontend point of view, I can't distinguish between loading and empty

Any tips to handle this?

[anothertempore]

The data should be undefined if it is not ready, which is the loading state.

[devhyunjae]

you mean,

init data undefined => loading
when api response null => empty
when api response list => render list

sounds reasonable 👍
But still, I don't prefer separating cases for null and undefined.
It should be confused.

[huozhi]

does isValidating work for you?

- const { data, error } = useSWR('/api/users', fetcher)
+ const { data, isValidating, error } = useSWR('/api/users', fetcher)

- if (!data) return <div>loading...</div>
+ if (isValidating) return <div>loading...</div>

[devhyunjae]

@huozhi Thanks mate! And sorry, should have read the doc with more time 😅