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.

6

Setting the property binding as Persistent likely only helps if the binding value when the view was last saved is the same as when it is used/embedded. It also can cause grief if you are trying to keep a standard set of views synced between multiple ignition deployments. When "persistent" the value of the resolved property binding is saved with the view and if someone opens/closes the view at a different time or on a different servers the saved resolved property binding value can differ even though the configuration of the view is otherwise equivalent. Likely only a concern if you are exporting views as JSON and doing text based compares... which I do.

7

Thanks @Ryan_Allen

I ended up with this..
Advanced Style Sheet:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

And for any Perspective component or embedded view I want to apply the fade-in animation I give it these CSS properties .

"opacity": 0
"animation": "fadeIn 0.3s ease 1s forwards"

I can change the 1s delay to something longer on a case-by vase basis if needed.

8

I'm going to keep plugging my EmbeddedView+ component until someone from IA acknowledges that things could be improved :laughing:

Edit: Here’s the original example video again (it’s for the Flex Repeater version, but the same improvements apply). Probably about time for an updated/simpler demonstration….