Skeleton UI on Repeating Groups

swordsoftarchive · 2020-11-03T01:01:46.833Z

I need a way to make repeating groups have a skeleton UI before fully loading on my site
Thing is, i want a way that is free, not paid. Is there any way i could do this for free?

cornelius.de.jongh · 2020-11-03T07:49:55.497Z

What do you mean, skeleton UI?

vnihoul77 · 2020-11-03T08:03:49.779Z

Hi,

This plugin is what you’re looking for, and maybe this one can do the job as well.

swordsoftarchive · 2020-11-05T08:23:45.853Z

both of these plugins are paid, i wanted a plugin that is free

swordsoftarchive · 2020-11-05T08:24:27.975Z

a temporary ui that shows up when a page loads until the page is done loading.
it’s basically the site’s ui but it’s all boxes and stuff until things fully load

jdiaz · 2020-11-11T16:59:17.939Z

I think one way you can do this is to place a group above the repeating group that you want the skeleton loading screen for and collapse its height when hidden. Uncheck the visible on page load and then add a condition to it that it is visible when the repeating group is loading. Inside the group, use shapes or other groups to create the skeleton of what is inside the repeating group. Create a few rows to show that it is a list, and then when the repeating group finishes loading, the group collapses out of the way and the repeating group of data is there.

If you want to take it a step farther, you can even use a drag/drop group to create a pulsating effect on the skeleton screen.

swordsoftarchive · 2020-11-12T05:55:47.272Z

how can i use a drag and drop group to get the pulsating effect?

jdiaz · 2020-11-12T13:46:52.289Z

Once you are done building your skeleton UI group above the repeating group, add a Drag/drop group within the the skeleton UI group. Align the drag/drop group to the left side of the skeleton group and make sure the the height of it covers all the components of the skeleton. Once the drag/drop group has been added, change its properties to the following:

Background style: Gradient
Gradient style: Linear
Gradient direction: Left
Starting color: color doesn’t matter, change transparency to 0
Ending color: color doesn’t matter, change transparency to 0
Intermediate color: #FFFFFF, change transparency to 30
Borders: none
Width: 100px

Go to the Workflow tab and add a new “Do every 5 seconds” event. Add a condition to do this workflow only when the skeleton UI group is visible. For the interval, put “1.5”. Next, add two Move Drag/drop Group actions from the element actions. For the first action, set it up to look like this:

Element: the drag/drop group
Movement Type: Using another element
Element to move to: Skeleton UI group
Offset Top: 0
Offset Left: the width of the skeleton UI group
Duration: 1500

For the second action, set it up to look like this:

Element: the drag/drop group
Movement Type: Using another element
Element to move to: Skeleton UI group
Offset Top: 0
Offset Left: -100
Duration: 0

This is what it should look like:
Screen Recording 2020-11-12 at 8.43.12 AM

jdiaz · 2020-11-12T13:47:37.949Z

The pulsating effect in the gif is a little blockish, but when you look at it on the page it is much smoother.

swordsoftarchive · 2020-11-13T10:31:30.273Z

thank you!

system · 2021-01-12T01:01:50.343Z

This topic was automatically closed after 70 days. New replies are no longer allowed.