Improve the UX of your Ionic 4 apps using Shell Components Tutorial DEMO

UI Skeletons, Ghost Elements, Shell Elements? They are all the same, and I bet you probably heard any of these concepts before. If you didn’t I’m sure you have seen this pattern in many of the apps you use daily.

At IonicThemes we have this new ionic 4 tutorial where we explain the benefits of adopting the App Shell (or skeleton) pattern and discuss how to implement it using Ionic 4 + Angular 7 and some advanced CSS techniques.

We start talking about the angular resolvers and the different ways of transitioning to a page and how we can improve the perceived performance of the app by using the app shell pattern. Then, we show how to create shells (or skeletons) for common components such as images, headers and text blocks and how to animate and customize them.

We built this demo app for the tutorial and all the code is available for free.