Different skeleton behaviour with newer versions

[MoyinShabi]

With the versions 0.4.0 and newer, there's a bit of lag in showing the complete skeleton of the child of the Skeletonizer widget, at once.

Kindly compare below👇

version 0.3.0 (normal & expected behaviour)

https://github.com/Milad-Akarie/skeletonizer/assets/21967002/ece41c5e-3939-4e22-934c-f6d2b4efda65

version 0.4.0 (unexpected behaviour)

https://github.com/Milad-Akarie/skeletonizer/assets/21967002/36dcca2b-ba36-44d8-83c7-0a4fa1c1bb24

version 0.7.0 (latest version; unexpected behaviour still)

https://github.com/Milad-Akarie/skeletonizer/assets/21967002/7b1007b0-a8d2-49e6-8741-86ef64a8c86b

[Milad-Akarie]

Hey @MoyinShabi yes this bit changed in version 0.4.0 and above, it's because Skeletonizer now draws everything like the default painter would, in your case you're using a network image which would take time to be fetched before it's drawn.

You shouldn't have to render a network image while showing a loading indicator, this might even effect performance on phones with slow internet connection.

Since we only need a rectangular to represent the image, it's recommended to remove widgets like Images from the render tree when skeletonizer is enabled, and you can do that by wrapping your image widget with Skeleton.replace So skeletonizer will use the replacement when it's enabled

[MoyinShabi]

Oh nice, I understand now. Thanks for your response!

[MoyinShabi]

@Milad-Akarie I have to ask though, why can't Skeletonizer render a skeleton of a Container without a child?

[Milad-Akarie]

@MoyinShabi Does it have a size?

[MoyinShabi]

Yes, it has a height, width, and color property (in the second photo). Please check out the results below. It seems like it can only render the skeleton of a Container or SizedBox with a child (as seen in the last 3 photos)

[Milad-Akarie]

@MoyinShabi I suppose that's because you're not giving a color, some users use containers for padding, margins, and alignment meaning they don't want them to render anything on the screen just position the child, so it'd be wrong to render anything then.

[MoyinShabi]

Hi @Milad-Akarie, I gave a color in the 2nd and last two videos though and only the child of the container got rendered, but I understand why they don't need to be rendered in some cases.

[Milad-Akarie]

@MoyinShabi do you need theme to render with a shimmer effect? in that case, try wrapping your container with Skeleton.leaf so it's treated as a leaf widget that has no children

[MoyinShabi]

Thanks a lot for your response, it helped!