There are two forms of busy dialog in Fiori. One is the flower shape in the picture below, which consists of 5 petals that rotate continuously. The other is the effect of continuous rotation of the 3/4 rings in the picture below.
For the effect of the former, you can watch this video I made . This video is the effect of manually changing the 300 millisecond delay of setTimeout in the picture below to 30 seconds, which means that the petal effect disappears after 30 seconds.
1. According to the observation of the call stack in the debugger, whenever the url changes, sap.ui.controller.doHashChange will be triggered, and this method will call openLoadingScreen. This method will create an instance of BusyDialog and call the open method. Implementation location of Busy Dialog: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/m/BusyDialog.js
2. The animation effect rendering implementation location: /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/core/Popup.js.
The renderFioriFlower method on line 52:
From the loop on line 97, it can be seen that 5 div elements are created in the loop body, which are actually 5 petals in the UI Fiori animation effect.
3. After the Fiori animation effect is displayed, when will it disappear?
Use setTimeout to add the closing action of LoadingDialog to the execution queue. If there are no other events to be executed in the execution queue after 300 milliseconds (parameter on line 188), close the Dialog.
To get more original technical articles from Jerry, please follow the public account "Wang Zixi" or scan the QR code below:
