Track the "readiness" of all components and the form itself to work when it is loaded

[artem_niko]

Good afternoon!
I am interested in the following question: is it possible to track the "readiness" of all components and the form itself to work when it is loaded? 
By "ready" I mean that while the form is being created, the components on it are stretched and also created, then some kind of loading process is displayed for this period of time.
Something like when ScreenMask is running, but I don't want to display the component rendering process until the end of this process. 
Like, let some ScreenMask spin on a white background while the form and components on it are being created and "prepared" for operation.

[andyhill]

The FormReady event is fired after all IDE objects are created.

[artem_niko]

1 hour ago, andyhill said:

The FormReady event is fired after all IDE objects are created.

Okay, let's say the FormReady event.

But before this event occurs, is it possible not to display the form and show some kind of ScreenMask with a blurred background before the FormReady event?

[Sherzod]

Hello,

This post may help you:

 

Addition for your case

If you also want to show a ScreenMask-like spinner on a white background during loading, you can try adding html::before to the CustomCSS:

body {
  opacity: 0;
  background: #fff;
}

/* Spinner stays visible while body is transparent */
html::before {
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid #ddd;
  border-top-color: #1a73e8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 9999;
}

@keyframes spin { to { transform: rotate(360deg); } }

 

[artem_niko]

1 hour ago, Sherzod said:

Hello,

This post may help you:

 

Addition for your case

If you also want to show a ScreenMask-like spinner on a white background during loading, you can try adding html::before to the CustomCSS:

body {
  opacity: 0;
  background: #fff;
}

/* Spinner stays visible while body is transparent */
html::before {
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid #ddd;
  border-top-color: #1a73e8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 9999;
}

@keyframes spin { to { transform: rotate(360deg); } }

 

I added this code, but when I open the project, it now goes into an infinite loading screen like the one in the screenshot

[Sherzod]

The link I shared above describes a sequence where the order matters. It looks like you may have missed some of the steps — especially the last one.

Also, I should mention that the solution was made for the desktop version of uniGUI, and I'm not sure it will work as-is for the mobile one.

[artem_niko]

51 minutes ago, Sherzod said:

The link I shared above describes a sequence where the order matters. It looks like you may have missed some of the steps — especially the last one.

Also, I should mention that the solution was made for the desktop version of uniGUI, and I'm not sure it will work as-is for the mobile one.

Ok, I make that I need (from this: https://forums.unigui.com/index.php?/topic/38032-resize-after-load-form/#findComment-172374), thank you!

One question: how replace black color to silver (or gray)?

At first, showing black color, then gray and then showing my form.

[Sherzod]

Well, try this — and you may want to use !important to make sure the theme's default styles don't override your background:

html, body {
  background-color: silver !important; /* or #c0c0c0, #e0e0e0, whatever you prefer */
}

body {
  opacity: 0;
}