Unable to Render Skeleton Component

Hello ya'll, as the title says. I have a react project were i made a Skeleton component - works exactly as expected. However porting this component to SolidJS the Skeleton does not render anything unless i Here is my code:
Component
import { Component, Switch, Match } from 'solid-js'
import { ISkeletonProps } from '@static/types/interfaces'

const Skeleton: Component<ISkeletonProps> = (props: ISkeletonProps) => {
return (
<div class="animate-pulse">
<div class={`bg-gray-800 rounded-md ${props.class}`}>
</div>
</div>
)
}

const SkeletonHandler = (props: ISkeletonProps) => {
return (
<Switch fallback={<div>Loading ...</div>}>
<Match when={props.render}>
<div class="wrapper-container mt-8">
<Skeleton class={props.class} />
</div>
</Match>
<Match when={!props.render}>{props.children}</Match>
</Switch>
)
}

export default SkeletonHandler
import { Component, Switch, Match } from 'solid-js'
import { ISkeletonProps } from '@static/types/interfaces'

const Skeleton: Component<ISkeletonProps> = (props: ISkeletonProps) => {
return (
<div class="animate-pulse">
<div class={`bg-gray-800 rounded-md ${props.class}`}>
</div>
</div>
)
}

const SkeletonHandler = (props: ISkeletonProps) => {
return (
<Switch fallback={<div>Loading ...</div>}>
<Match when={props.render}>
<div class="wrapper-container mt-8">
<Skeleton class={props.class} />
</div>
</Match>
<Match when={!props.render}>{props.children}</Match>
</Switch>
)
}

export default SkeletonHandler
How i am trying to use it
import { A } from 'solid-start'
import SkeletonHandler from '@components/Skeleton'

const RenderMain = () => {
return (
<div>
Hello
</div>
)
}

const HandleMain = () => {
return (
<SkeletonHandler class="h-8 w-full mt-2" render={true}>
<RenderMain />
</SkeletonHandler>
)
}

export default function Home() {
return (
<main class="flex justfiy-center flex-col items-center content-center text-center mx-auto text-gray-700 p-4">
<HandleMain />
</main>
)
}
import { A } from 'solid-start'
import SkeletonHandler from '@components/Skeleton'

const RenderMain = () => {
return (
<div>
Hello
</div>
)
}

const HandleMain = () => {
return (
<SkeletonHandler class="h-8 w-full mt-2" render={true}>
<RenderMain />
</SkeletonHandler>
)
}

export default function Home() {
return (
<main class="flex justfiy-center flex-col items-center content-center text-center mx-auto text-gray-700 p-4">
<HandleMain />
</main>
)
}
I can see the divs rendered in the inspect tools - but the skeleton only renders if i put text inside of the div element
4 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
DaOfficialWizard🧙
yes, i am setting it to h-8 from TailwindCSS
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
DaOfficialWizard🧙
The Skeleton component itself - but you saying it is a styling issue made me curious. I got it to render correclty by removing the styling on the Home component the issue - is the flex class -.- well... glad i know, sorry for the support request xD just for posterity - i solved it. I put w-full on the wrapper-container div within the skeletonHandler component. Works ... so far