Thread
#compose-web
    t

    Tomáš Hubálek

    1 year ago
    Hi, I have JPCW architecture question. We have app and it shows animated full screen loading indicator. It works well, but when it is turned on and off quite often then animation restarts and it causes annoying flickering. I'm thinking whether it is possible somehow just show and hide that indiciator without recomposing it. I can imagine that composable that is used for rendering of indicator will just call some external javascript that will change visibility of some HTML element that is not rendered by compose. Is that solution? Or do you have any other idea?
    o

    Oleksandr Karpovich [JB]

    1 year ago
    indeed, if it's not a part of the compose-managed dom, then you can manage it manually. But ideally no one would need to do this. So I want to know more about your case.
    I'm thinking whether it is possible somehow just show and hide that indiciator without recomposing it.
    Does the indicator get shown under some condition? like:
    if (showIndicator) LoadingIndicator()
    In this case it should not be a part of the composition at all when the condition is false. Is it possible to provide a code example to showcase your problem?
    t

    Tomáš Hubálek

    1 year ago
    You can see it on attached video (there is loading indicator) and when it is shown and hidden multiple times in short period of time then animation is not smooth as it is started from beginning every time I call
    LoadingIndicator()
    and stopped every time
    LoadingIndicator()
    is disposed. So I would like to make that indicator running forever (it is pure CSS solution, no JS) but just hide it when nothing happens.
    o

    Oleksandr Karpovich [JB]

    1 year ago
    if I understand correctly, the indicator state in your case depends on multiple independent sources? attribute
    hidden()
    might be one of the options although I don't think it will help avoid flickering when the state gets changed often. another solution could be to use some kind of debounce for changing the loading state. So it doesn't hide immediately but in 100ms for example. and to apply this debounced loading state to hidden() attribute. The problem with this solution is that it's not known what number (ms) should one use for debounce (what number suits the best). https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/debounce.html
    t

    Tomáš Hubálek

    1 year ago
    I was thinking about
    visibility
    css property.
    I think that delayed hiding showing may help. I'll think about it.