Hi,

Is it somehow possible to avoid flickering at page transition between coaches? I tried many solutions but neither works (meta tag, css animation) or works nice.

It is very annoying that on transition from either coach to another first the page gets white, then gets the color of the background defined in the theme, and finally the views are displayed. Looks like the screen is flickering.

It would be nice a solution to fade out the original page (coach) then fade in the next. How could I implement something like this?

Thx,

Laszlo

------------------------------
Laszlo
------------------------------

You can do this rather easily with a combination of a css transition for the fading effect and the Timer control. Instead of navigating on button click, you navigate with the timer. You set the timeout on the timer >= duration of the CSS transition. On button click you just start the timer, add the ccs class to what you need for your transition, and let the navigation occur when the timeout occurs (timers, like buttons, emit boundary events).

I encourage you to consult the Knowledge Center's UI toolkit's documentation - or this redbook - to get a sense of the flexibility/capability of the toolkit.

------------------------------
Eric Ducos
------------------------------

Thanks Eric, but it will slow down the page transition and I don't want that. On the other hand the problem is that no matter what do I set to the html or body tag, the browser first clears its content area to white, then sets the content area to the background color of the next page, finally shows the content of the next page. This needs around two seconds. So the page transition is slow by default, adding more time will decrease the user experience.

I tried to add fade-in animation to the pages. In this case the sequence looks like this:

The browser

1. clears the content area to white
2. sets the content area to the background color of the new page
3. shows the content of the new page
4. dims the content area and fades it in

The fade-out animation has no effect for the pages because the browser clears the content area immediately, so the animation can't run (at least I think so).

I need to eliminate the 2. and 3. steps. Any idea?

------------------------------
Laszlo
------------------------------

Original Message:
Sent: Mon May 11, 2020 08:47 AM
From: Eric Ducos
Subject: Avoiding flickering while page transition?

You can do this rather easily with a combination of a css transition for the fading effect and the Timer control. Instead of navigating on button click, you navigate with the timer. You set the timeout on the timer >= duration of the CSS transition. On button click you just start the timer, add the ccs class to what you need for your transition, and let the navigation occur when the timeout occurs (timers, like buttons, emit boundary events).

I encourage you to consult the Knowledge Center's UI toolkit's documentation - or this redbook - to get a sense of the flexibility/capability of the toolkit.

------------------------------
Eric Ducos
------------------------------

Hi Laszlo,
in my previous company we have used CV with Dojo Controller as suggested in the following link and it worked like a charm - was using in IBPM 8.5.7, probably should be no big difference with current version - so give it a shot:
http://www.ibpmcoding.com/2015/02/please-wait-dialog-coach-view-in-ibm-bpm.html

------------------------------
Tomas Dambrauskas
------------------------------