Next.js Discord

Discord Forum

Dev page doesn't stop loading

Answered
Xander posted this in #help-forum
Open in Discord
XanderOP
I have a component tree like this
Server -> Client -> Server
If I change that client component to a server component, it works fine.

In this state the site appears to work fine, but the React devtools can't seem to find any components and chrome doesn't stop loading the page (even though it appears fully loaded)
Answered by Xander
it is the lib. I solved it by removing use client from this and adding it to button itself
View full answer

22 Replies

XanderOP
I'm very new with react in general.
I plan on doing user auth with accounts and stuff, all that has to be client-side right? If that's so then this component will have to be a client.
American Chinchilla
what the error your getting>
@Xander
XanderOP
there's no error
it just carrys on loading
American Chinchilla
how are you passing the server component into the client
XanderOP
both Button and FAI is server
American Chinchilla
hmm because you cant directly import server comp into client comp
you can only pass server comp as a children to a client comp
XanderOP
what's the difference
American Chinchilla
it wont be a server comp
it will be a client comp
and so will all its children
XanderOP
i mean that's fine
i just need it to stop loading haha
American Chinchilla
can you show the full snippet
for the client comp
not sure if your doing some request
XanderOP
'use client'

import { Sound } from "@/lib/sound/sounds"
import Button from "@/components/ui/Button"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faDownload, faPencil } from "@fortawesome/free-solid-svg-icons"

type SoundActionListProps = {
    sound: Sound
}

export default function SoundActionList({
    sound
}: SoundActionListProps) {
    const canEdit = true

    return (
        <>
            <Button hrefLink={sound.downloadUrl}>
                <FontAwesomeIcon icon={faDownload} />
                Download
            </Button>
            {canEdit ? 
                <Button hrefLink={``}>
                    <FontAwesomeIcon icon={faPencil} />
                </Button>
            : undefined}
        </>
    )
}
American Crow
Is it the <FontAwesomeIcon> lib itself? (Never used it)
If you replace the FontaesomeIcons with a simple <span>pencil</span> does that solve it?

Also don't use :undefined but rather :null for your conditional jsx
Answer