Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Graph grayed out

Hi,

I am experience small visual issue in my application.
Iam not certain it will be clear from the following screenshot:

But it occasionally happens, that one of the graphs is bit dimmed (I believe it’s in the same way, as if the component was updating (which is not).) It should be quite noticeable, mainly from the right side’s graph header.

Could anyone point me to what might be happening or how to investigate the issue?
Thanks

Hi @LavinaVRovine, how is the graph supposed to look normally? If the problem is something which happens while you are using the app, maybe you record a video of your screen and post here an animated gif to show what the problem is?

@Emmanuelle
thanks for the reply.

Well, here are couple more files

Here is the desired outcome:

Here is the problematic outcome:

And here is a gif showing how are both achieved.

Basically, if i do access the page via link in the app (dcc.Link), it works fine, but if i ctrl+R the page, the left graph is “blurry/dimmed” - the different should be noticable on the screens, not on gif due to quality reasons.
There is no difference in the code, they use the same underlying functions.

I sort figured out, why this behavior happens.
I have

*[data-dash-is-loading="true"] {
    opacity: 0.75;
    transition-delay: 0.2s;
}

defined in my css, hence the “blurry” visual.
The question therefore is, why is “data-dash-is-loading” not set to false, after the visual is sucessfully rendered?