How to fix or how to use suspense{guilds.map((guild) => ( Loading }> ))}

suspense next.js doesn't work

Unanswered

Mandarin fish posted this in #help-forum

Mandarin fishOP

2023-11-25T11:40:55.000Z

How to fix or how to use suspense

{guilds.map((guild) => (
                <Suspense fallback={<p className=' text-primary'>Loading</p>}>
                  <Link
                    href={server/${guild.id}}
                    className=' flex gap-3 p-3 rounded-xl group text-primary duration-150 ease-out hover:bg-transparent-con'
                    key={guild.id}>
                    <div></div>
                    <ChevronRight
                      className=' opacity-0 translate-x-[-5px] text-primary group-hover:translate-x-0 group-hover:opacity-100 duration-150 ease-in-out'
                      size={24}
                    />
                  </Link>
                </Suspense>
              ))}

6 Replies

Ray

2023-11-25T11:42:33.000Z

this is not how Suspense works

check the doc
https://react.dev/reference/react/Suspense

@Ray this is not how Suspense works

Mandarin fishOP

2023-11-25T12:07:51.000Z

suspense can work only with components?

@Mandarin fish How to fix or how to use suspense js {guilds.map((guild) => ( <Suspense fallback={<p className=' text-primary'>Loading</p>}> <Link href={server/${guild.id}} className=' flex gap-3 p-3 rounded-xl group text-primary duration-150 ease-out hover:bg-transparent-con' key={guild.id}> <div></div> <ChevronRight className=' opacity-0 translate-x-[-5px] text-primary group-hover:translate-x-0 group-hover:opacity-100 duration-150 ease-in-out' size={24} /> </Link> </Suspense> ))}

Clown

2023-11-25T12:42:35.000Z

What you have written doesn't seem to do anything that won't be near-instantaneous

Suspense allows for showing loading state for components that require data fetching

You aren't fetching anything here