Can you help me troubleshoot why my skeleton is not rendering properly?

[MendyLanda]

I attempted to implement a skeleton loader when loading my API, but it doesn't seem to appear on the screen. To test it, I tried rendering it on the screen in the return statement directly, but it's still not working properly. While something does appear on the screen, there is something off about it that I can't figure out.

I have tried adjusting various parameters such as height, width, baseColor, and highlightColor, but none of them seem to have any effect. The only parameter that seems to make a difference is the count, which increases the number of divs rendered and takes up more space as it is increased.

Here is the code I am using, as well as the resulting HTML and visuals.

return (
    <DashboardLayout>
      <div className="flex flex-col space-y-4">
        <Skeleton
          width={35}
          height={35}
          count={9}
          baseColor="#e0e0e0"
          highlightColor="#f5f5f5"
        />
        <h1 className="my-14 text-5xl font-bold sm:self-start">My Lines</h1>
        <div className="flex h-fit w-full flex-col items-center space-y-4 sm:flex-row sm:items-baseline sm:justify-between sm:space-y-0">
          <LineFilterTabs onChange={handleTabChange} />
          <LineSearchInput onSearch={setSearch} />
        </div>
        <div className="flex h-fit w-full flex-col items-center overflow-x-auto rounded-2xl bg-base-200 p-4">
          <LinesTable
            data={subsQuery.data ?? []}
            subsCount={subsCount ?? 0}
            pagination={{ pageIndex, pageSize }}
            setPagination={setPagination}
          />
        </div>
      </div>
    </DashboardLayout>
  );

[MendyLanda]

I forgot to mention I'm using NextJS, Tailwind and, DaisyUI

[srmagura]

Hi @MendyLanda, did you import the react-loading-skeleton CSS file as shown in the README?

[MendyLanda]

I have

[srmagura]

Are you able to share your project (or a minimal reproducible example) with me so I can investigate? Otherwise there is not much I can do to help.

[MendyLanda]

Off course, I thought there's might be an obvious issue with my implementation so I shared the minimum only.

Tomorrow I'll setup something for you to see.

Just so you'll have the facts:
I'm using something else meanwhile, and the issue is probably due to my lack of knowledge in nextjs and react, so maybe you better wait to see if anyone else is encountering the same issue.

Anyway, I appreciate the support and all that you do here 🙏❤️

[victorbonanho]

Same here. Any progress?