Skeleton Screen in Anvil

[Hassan_Dabary]

Today I will show you how to show skeleton screen while waiting for your data to be loaded from the server.

1. First of all open your anvil editor and draw a demo of your project card.

2. Then after that go to your AppThemes>Roles and create new role and name it ‘skeleton’ and add the components of your project card so that you could assign it to them.

3. Then go to your theme.css file under your assets and the below code also you can modify your items accordingly if you wish.

/*Skeleton Part*/
.anvil-role-skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
  height:30px;
  border-radius: 40px;
}
@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}
.anvil-role-skeleton >button{
  width:10px
}

4.Then after that go to your project demo you have just created and select your items one by one and change their roles to the skeleton role you have just added on your roles.

5. Copy three or four of your card demos and place them on a ColumnPanel and name it ‘lodaing_column’

6. Then finally place the line to hide this card once your projects are ready to be shown

Here is the clone link:
https://anvil.works/build#clone:ASY72AYZQDUJ6NLR=ONAJCHEJVKFRHA4CFUPLWQQU

That’s all,
Enjoy Coding

[stein]

Interesting!

Perhaps you could add a clone link to a demo, and/or an animated gif that shows what the result looks like?

[Hassan_Dabary]

Thanks @stein I have updated the post with a clone link

[stein]

This is very cool, @Hassan_Dabary! I may use this in my app. Thanks for sharing!

[Hassan_Dabary]

Thanks, it’s my pleasure to

[mark.breuss]

Nice one @Hassan_Dabary

[david.wylie]

I didn’t have the foggiest idea what you were talking about when you posted, but having seen it running that does look rather cool

[ianb]

@Hassan_Dabary very cool, we need more stuff like this in the forum!

Like @stein suggested, I made a gif so people can see the effect. You can make example gifs using a program called LICEcap :

[Hassan_Dabary]

hahaha cool hope you will get it ready when you are in need to it @david.wylie

[Hassan_Dabary]

Waaaw very nice so glad to know how to capture a gif
@stein had told me but I wasn’t knowing how to capture it so I said it’s far easier to do a clone link

[Hassan_Dabary]

@ianb You are right the community should be rich of like such stuff
for example I have tried so many stuff to do so and really it takes more than usual from me as I am a some how expert in Javascript and CSS so that if any one tried some thing that was not easy for him and posted his result over here no one will waste any more time to do so again.
I have many great ideas to make this environment rich but a little bit busy these days but will try as much as I can

[ali1]

Love this @Hassan_Dabary! It gives a renewed level of professionalism to any app!