SolidJS•2y ago

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•2y ago

Message Not Public

DaOfficialWizard🧙•2y ago

yes, i am setting it to h-8 from TailwindCSS

Unknown User•2y ago

Message Not Public

DaOfficialWizard🧙•2y ago

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

Gaming

Programming

Unable to Render Skeleton Component