Skip to content

Commit

Permalink
chore: added isLoading to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
stevensJourney committed Aug 28, 2024
1 parent 81f0f53 commit 5db5371
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-dogs-clap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@powersync/react': patch
---

chore: Added `isLoading` example to README
35 changes: 35 additions & 0 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,38 @@ export const TodoListDisplay = () => {
</View>
}
```

#### Query Loading

The result from `useQuery` contains information about the data loading and fetching states. This can be used to show loading spinners or conditional widgets.

```JSX
// TodoListDisplay.jsx
import { useQuery } from "@powersync/react";

export const TodoListsDisplayDemo = () => {
const { data: todoLists, isLoading, isFetching } = useQuery('SELECT * FROM lists');
return (
<div>
<h1>Todo Lists {isFetching ? '' : ''}</h1>
<div
style={{
opacity: isLoading ? 1 : 0,
transition: 'opacity 0.5s ease-in-out'
}}>
Loading todo lists...
</div>
<div
style={{
opacity: isLoading ? 0 : 1,
transition: 'opacity 1s ease-in-out'
}}>
{todoLists.map(() => (
<div key={l.id}>{JSON.stringify(l)}</div>
))}
</div>
</div>
);
};

```

0 comments on commit 5db5371

Please sign in to comment.