Parameter to sync animations in BitLoading components

[Kyemate]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

No response

Describe the solution you'd like

Now when showing multiple loading compoents they get rendered out of sync with make the ui look messy

Additional context

No response

[msynk]

Thanks for contacting us. We're investigating this issue.
We'll let you know if it's possible to work on this issue.

[msynk]

@Kyemate
I couldn't find the issue in the demo page of the loading components (https://blazorui.bitplatform.dev/components/loading) that renders all the loading components on the same page.
Could you plz explain the issue in more detail?

[Kyemate]

The problem is that when multiple loaders are initiated they spin with different start times so the animations are not in sync. That looks a bit messy. I was able to solve it by using pure html/css loader that uses a shared variable that the loaders synced through time.

var duration = 1.2;
var delay = -(DateTimeOffset.UtcNow.ToUnixTimeMilliseconds() / 1000.0 % duration);
<div class="loader" style="--sync-delay:@($"{delay}s")"></div>
.loader {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;

  animation: pulse 1.2s infinite ease-in-out;
  animation-delay: var(--sync-delay);
}

@keyframes pulse {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

[msynk]

Thanks for the additional data, but I still can't see the problem. How can I reproduce this out-of-sync situation? As you can see in the demo page, which renders multiple loading components as you mentioned, we can't see this issue. Is there any specific condition for this issue to be visible enough?
The solution you've proposed only sets a delay for each animation. In theory, it shouldn't resolve this issue; it only delays the out-of-sync problem for a specific amount of time.
Can you see the same problem in the demo page?
Do you have any source code that reproduces this problem?

[Kyemate]

Here is an example how you can reproduce it:

<section>
    @for (var i = 0; i < loaderCount; i++)
    {
        <BitRingLoading />
    }
</section>

<BitButton OnClick="StartLoading">Add Loaders</BitButton>

@code {
    private int loaderCount;

    private async Task StartLoading()
    {
        loaderCount = 0;

        for (var i = 0; i < 5; i++)
        {
            await Task.Delay(300);
            loaderCount++;
            StateHasChanged();
        }
    }
}

[msynk]

oh, you're NOT rendering the loading components at the same time. it is a classic issue of animated objects in CSS and I don't think you can resolve it easily. the animation delay is only a workaround not a solution here.

I did some research and found a very niche solution using js:

window.syncAnimations = () => {
    const elements = document.querySelectorAll('.bit-ldn');
    const now = document.timeline.currentTime;
    
    elements.forEach(el => {
        el.getAnimations().forEach(anim => {
            anim.startTime = now;
        });
    });
};

Note: not all of the animated elements in our loading components are the root element with the bit-ldn css class.

[Kyemate]

oh, you're NOT rendering the loading components at the same time. it is a classic issue of animated objects in CSS and I don't think you can resolve it easily. the animation delay is only a workaround not a solution here.

I did some research and found a very niche solution using js:

window.syncAnimations = () => {
const elements = document.querySelectorAll('.bit-ldn');
const now = document.timeline.currentTime;

elements.forEach(el => {
    el.getAnimations().forEach(anim => {
        anim.startTime = now;
    });
});

};
Note: not all of the animated elements in our loading components are the root element with the bit-ldn css class.

Exactly. The code I sent in my first comment does something similar but with c# and css. I was wondering if it would be possible to add some parameter to the loading component to make it easier 🤔