[FRONT] - On chart dashboard box, loading spinner when new value arrives is displayed too often

[VonOx]

https://community.gladysassistant.com/t/graph-bug-refresh/7108

[atrovato]

What do you think about something like

instead of the big loading circle?

---

CSS:

.progress-bar {
  height: 4px;
  background-color: rgba(5, 114, 206, 0.2);
  width: 100%;
  overflow: hidden;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(5, 114, 206);
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.4);
  }
  100% {
    transform:  translateX(100%) scaleX(0.5);
  }
}

HTML added in box card element:

<div class="progress-bar">
    <div class="progress-bar-value"></div>
</div>

[atrovato]

@VonOx

[VonOx]

Yes it's better, less annoying and we keep informing that something happening.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[VonOx]

@atrovato tested your PR ( chromium 103.0.5060.134 )

Loader is fine except its persistant, even when no new value there is like a shadow at box bottom. A bit weird

[atrovato]

The blue background is problem. Thank you for your feedbacks.

[atrovato]

I pushed the transparent background, tell me if it's better. Thank you.