Skeleton Screen

Hi everyone,
I am trying to develop app with skeleton screen like Facebook app.
Is there any reference or sample project to do this in xamarin forms?
May be you can show us the example how to combine it with data binding

Best Answers

Answers

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    Forgive my ignorance - but what is a skeleton screen?

  • JohnHardmanJohnHardman GBUniversity mod

    @JamesLavery said:
    Forgive my ignorance - but what is a skeleton screen?

    Effectively the desired page, but without the data loaded yet - typically showing gray boxes where the data will go. The data is then populated as it becomes available.

    The idea is that it gives users a warmer, fuzzier feeling than watching a spinner. Pages that use spinners are perceived to load slower than pages that use skeletons that are subsequently populated.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    @JohnHardman said:

    @JamesLavery said:
    Forgive my ignorance - but what is a skeleton screen?

    Effectively the desired page, but without the data loaded yet - typically showing gray boxes where the data will go. The data is then populated as it becomes available.

    The idea is that it gives users a warmer, fuzzier feeling than watching a spinner. Pages that use spinners are perceived to load slower than pages that use skeletons that are subsequently populated.

    Aha - thought that was it, but wasn't sure...

  • cahyoagungcahyoagung Member ✭✭

    @JohnHardman said:
    What have you tried so far?

    I have no idea where to start from

    As well as binding the actual data, you'll probably also want to bind BackgroundColor in order to get gray (or some other color) coloring until the data is populated. Depending on quite the effect you want to achieve, you may want to overlay particular Views with BoxView and/or Frame and/or ContentView (or something more complicated), and then bind IsVisible to allow switching between "empty" appearance and populated appearance.

    So, basicly we can use image/view as placeholder, after the data loaded then hide the placeholder using bindable IsVisible?

  • cahyoagungcahyoagung Member ✭✭

    I got it. Thank you @JohnHardman

Sign In or Register to comment.