Update docs: loading state is false on first render

[andyGallagher]

Hi — really loving this library, thanks for your excellent work here.

I've noticed a behavior that I would appreciate some clarification on. On initial renders without any conditional logic, loading is set to false and data is undefined.

Subsequently, the doc's example usage, while obviously contrived, does not work in a way I would expect:

// components/Post.tsx
const Post = () => {
  const { data, loading } = useStore($currentPost);

  if (data) return <div>{data.content}</div>;
  if (loading) return <>Loading...</>;

  console.warn("💀 This is actually rendered!  Not what I would expect.");
  return <>Error!</>;
};

You can see live examples of this log here.

This is easy enough to work around, as you can just create a function that tracks an initialization state that looks at if loading has ever been toggled from false to true. That said, I'd like to recommend updating the docs to make note of this behavior. Let me know what you think; happy to open a PR.

[nicko-winner]

Also having the same issue. Here is proof of concept for a workaround that does not track stores.

/**
 * Support loading states closer to TAN stack query
 */
import {useStore} from "@nanostores/react";
import {FetcherStore} from "@nanostores/query";


export const useNanoQuery = ($store : FetcherStore) => {
 const query = useStore($store);
    return {
     ...query,
     isFetching: query.loading,
     // Assume if there is no data, we are in a loading state.
     // This should support conditional queries that have not been enabled yet, and initial loading false states,
     // This isLoading state prevents parts of the UI from being rendered until we have the data.
     isLoading: ((query.loading && !query.data) || !query.data) && !query.error,
 };
};

Not any better than what is in the docs just what I'm used to, and it makes it so error and loading statements do not have to be in any order.

function MyComponent() {
    const {isLoading, error, data} useNanoQuery($store)
    if(isLoading) return <Loading />
    if(error) return <Error error={error} />
    return (
       <Table data={data}
    )
}