Skip to content

Commit

Permalink
chore(docs): client-side data fetching loading state (vercel#53164)
Browse files Browse the repository at this point in the history
setLoading must be "true" at first and then set to "false". The documentation, as is, always has the value of setLoading set to "false".

The purpose of this code is to show "...loading" on the screen while the data is being fetched. In order for this to happen, setLoading must be initially set to "true" and then (after the data is successfully loaded) set to "false", since the line `if (isLoading) return <p>Loading...</p>` is asking if the content is still loading, and if it is, it'll return a message indicating it.

Because of this

### What?
setLoading should be set to "true" at first.

### Why?
Because the code then asks if the content is being loaded. The code (as is) always has setLoading set as "false" and it doesn't show the loading message when it's supposed to.

### How?
I changed the line to `const [isLoading, setLoading] = useState(true)`.




Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
  • Loading branch information
2 people authored and rfearing committed Jul 26, 2023
1 parent c53fa90 commit 3cf4fca
Showing 1 changed file with 1 addition and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,9 @@ import { useState, useEffect } from 'react'

function Profile() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
const [isLoading, setLoading] = useState(true)

useEffect(() => {
setLoading(true)
fetch('/api/profile-data')
.then((res) => res.json())
.then((data) => {
Expand Down

0 comments on commit 3cf4fca

Please sign in to comment.