Graph grayed out

Dash Python
1

Hi,

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

image
image1846×503 68.4 KB

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

2

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?

3

@Emmanuelle
thanks for the reply.

Well, here are couple more files

Here is the desired outcome:

not_dimmed
not_dimmed1865×642 100 KB

Here is the problematic outcome:

dimmed
dimmed1835×620 93.6 KB

And here is a gif showing how are both achieved.

works
works1859×751 335 KB

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.

4

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?