At a customer session, I was reviewing a dashboard with 3 lists containing data from an integration. The first thing that crossed my mind was: “After the login the user needs to wait a long time before he sees anything of the page, because of the performance of the integrating system.” This triggered me: “Can we improve the user experience? Can we display the user data that is already available and other data later? Can we change the way that Mendix renders?

Mendix page rendering

The Mendix page rendering construction implemented since Mendix 6 has a loading function that allows the page to load fully before displaying anything. The user waits with a complete ‘white screen’. But Mendix has a strong advantage on integration with Mendix apps and non-Mendix apps. Retrieving large amounts of content and displaying it real-time. Integrations require an execution time because of network latency and data processing. This also applies to reporting functionality.

How to solve?

Based on the questions it started me thinking whether it’s possible to display loaders for each list. The user sees the dashboard for parts that are already available and the lists show as soon as the integration is ready. Building on this, we’ve developed a widget that will display a loading function for just those lists. The Mendix page rendering is fast for the experience of the user: he can view content that is already available and content that takes longer will show up when it’s ready. Although the actual time to load all information is just as long, the result is a greatly improved user experience. See for yourself!

Now make your users happy!

The configuration of the widget is simple: it requires only two properties: a microflow and a page for the content. When the overall page is initialised the widget triggers the microflow. As long the microflow is running a loader function is displayed to the user. The loader is based on CCS3 animation and is fully customizable. When the microflow is done the loader is replaced by the configured page which contains the desired content.

So go ahead and try it out for yourself and download the widget from the Mendix Appstore: https://appstore.home.mendix.com/link/app/50833/Appronto/Dataview-Loader or have a quick view at the widget: https://dataviewloader.mxapps.io/