Custom show progress and hide progress in mendix native

Hello Team, In mendix native there is a default show progress and hide progress but I want to add a custom gif file for loader. I want to use my gif file for show progress and hide progress in nanoflows. Kindly update.
2 answers

Hello Jayasree,


I believe you can use an adapted approach from this article:


Basically you have to use an Static Image (which can also show animated GIFs) and an associated text, both inside a container with custom styling and with a conditional visibility.




Your logic should determine when the loader is visible or not. In this example, I'm using a timer for that:



After some adjustments from the described in the article, I achieved this result:



This is the custom styled used in the container:


import {Dimensions} from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export const containerLoader = {
    container: {
      position: "absolute",
      bottom: windowHeight/2,
      paddingHorizontal: 25,
      alignSelf: "center",
      alignItems: "center",
      height: 45,
      borderRadius: 5,
      justifyContent: "center",
      backgroundColor: "lightgray",
      opacity: 0.9,
      zIndex: 999999,


I hope this helps!



Hello Jayasree,


I'm glad it worked!


However, it would be better if we have a standalone RN library "GifPopupMessage", similar to ToastAndroid which we could call anywhere from a JavaScript action.


Since such library isn't available, we have to find an alternative MX solution. A feasible solution is described below:

In your case, you can associate the Loader NPE with a System.Session:



Create a DS that instantiates and associates the Loader with the Session:



Here I'm using the new Mx10.5 feature

length($LoaderList) != 0

in the Decision activity, but you can also test if the Head(LoaderList) != empty and create it when needed


Create a Snippet without parameters that encapsulate the GIF and the message. In this snippet a DataView should use the DS from the picture above



Then put this Snippet inside the page Layout you are using on your application.



All pages that use this template will get access to the Loader via the (part) of the NF shown below:



This NF can be called from anywhere, since it relies on the Session to get the Loader.


The procedure shown here will result similar to the previously answered, with the difference that now the Loader is available anywhere thanks to its association with the Session.


The drawback is that the Session is volatile, it is deleted after 10min of inactivity


Not sure the impact this limitation in the proposed solution. Probably after the timeout, the Loader will not be shown. To be verified  ...


Would like to hear from the Mendix Experts if they have a better solution for this...