Flicker on page startup: views show their default parameters for a fraction of second before loading passed parameters

Ignition Early Access
,
1

A picture is worth a thousand words they say, so here it goes, a page loads and for a fractions of a second the following is shown:

image

a fraction of seconds later the page loads with the correct values as below:

image

the above is most likely due to the fact that the component above is a view inside a repeater component which passes a text to be shown inside a label (the "Generale" and "Antiscintilla" shown above) and an input parameter "edit" which when set to True shows the two above icons (the trash icon and the pencil icon).

The flicker of a fraction of second usually is due to one of the below conditions:

  • the view shown by the repeater has some default parameters which are inserted when the view is executed inside the designer with the "play" button and all views' pararameters are populated with their values. Then the project is saved, the designer closed and these parameters' values are stored as defaults.
  • the view shows some elements by default and a binding or script hides the elements at startup, in the mean time between loading and executing the scripts, the elements are briefly shown.
  • none of the above two cases: some cases are simply non-fixable and the customer is left with this confusing flicker of the screen.

Will it ever be possible to remove this behaviour (which I remember since the first editions of Ignition) which, at the moment, in the best cases requires significant time and effort to be fixed by development team and in worst cases is left as is to the customer being basically unfixable?

Thank you

2

Here's a recent topic that might have the answers you are looking for:

3

Along with the info in the post Daniel mentioned, you can also add something like this to your stylesheet.css:

@keyframes view-ease-in {
  0% {
   opacity: 0;
  }
  10% {
   opacity: 0;
  }
  20% {
   opacity: 0.05;
  }
  40% {
   opacity: 0.5;
  }
  50% {
   opacity: 1;
  }
}

You'd then use the view-ease-in style on the root container of any page/popup which serves to hide the flicker

image

4

To add, definitely not a bug. It might not be the way you would like it, but it is normal behavior.

When a component loads it has a null value for properties and then evaluates bindings. Using Persistent will most likely resolve your issue.

5

setting Persistent option on the binding seems to have solved.

1 Like