Skeleton is a designer component of Backendless UI-Builder. This allows you to add a skeleton element to display that data loading.

The component is based on an external Skeleton.

Stanislav Podlesnyi
October 20, 2023

Hi, @Alex Klein !

We are happy to announce that the “Skeleton“ component has been updated to the 1.1.0 version with a new "Margin" setting, Dimension values without "px", new Readme usage and another helpful changes. You already can try it on the Marketplace or Update your actual component to the last version in your App.

To the dynamic size content question - You can use width and height logic to determine dynamic size. Previously, values were accepted only with the indication of the unit of measurement. But now we've added some validation and now it's possible to pass a value without a unit, but that value will be automatically converted to px. Also, to determine the height and width depending on the screen size, you can use the "Get App Size" block.

If you Still have questions - please, create the Support topic and we can help you there.

Happy Codeless Coding!

Alex Klein
October 22, 2023

Hi Stanislav, thanks for the update, I understand this component more now. Seems to me that is is essentially a block with a few kinds of CSS classes which we can make visible or invisible when we want, with possibly some height/width logic areas that allow us to set sizes. Perhaps building our own CSS class(es) for content is a smarter way to create the skeleton loading? I’m relatively new to coding, but I imagine adding or removing a class that defines a “loading” animated background for any kind of element would be easier than turning on & off visibility for multiple elements… or maybe I’m missing something? How does this specific component save us time/work? Thank you again for your efforts!

Stanislav Podlesnyi
October 5, 2023

Hi, Alex!

Thank for your comment.

I’ve tested your cases and can aswer you that we created an internal sub-tickets to add the Usage to the Readme file and fixing some issues.

When you type the dimetsion props (height, width) you need to use index without space - “px“ or “%“. Ex - “100px”, not “100”, not “100 px“.

There are “width logic” and “height logic” in the component already, we’ll add the dynamic dimesions change to the Usage.

I’ll notifiy you, When a new version will be available.

Alex Klein
October 17, 2023

Hi Stanislav, any update on this component? We really would love to avoid having to build our own custom component 😀

Stanislav Podlesnyi
October 18, 2023

Hi, Alex!

The feature is on the development stage. We are planned to release it on this week)

Alex Klein
October 4, 2023

Hello team, after playing with this component, some questions (or bug reports):

— it appears that the component becomes invisible automatically as soon as some other content that’s contained in the same block is rendered. Is this how it works? Would be good to document a little more to specifically describe how ‘Skeleton’ works.

— when not setting a height, component is nicely visible. But when we set a height, the ‘Skeleton’ is not visible. This is a bug, I think.

—when setting a width, this is just ignored by the component (setting width to “100” does nothing, ‘Skeleton’ is still 100% of parent container.

—”classes” seems to be simply ignored, we cannot use any of our pre-defined CSS classes.

— how to deal with content that this dynamic in size (e.g. an image that is 400 px max width but can be smaller on mobile phones)? Do we create “width logic” and “height logic” via some calculations we have to come up with? What shape does “width logic” take? Wiring a number to the return doesn’t seem to do anything other than break things, the ‘Skelton’ is not visible at all if we do that.

Please advise and thank you

Stanislav Podlesnyi
October 24, 2023

@Alex Klein , Hi!

If I understand correctly - yes, it can works in certain situations, but by removing and adding to the page, you can make a more detailed skeleton like the card in the usage guide, and it will be a more versatile solution. You may not be able to change the background to show the skeleton in some components.