Invert X-cloak for Loading Animation

[ubeyou]

Hello! Is there a way to reverse the x-cloak process? I'm attempting to conceal the loading bar once x-cloak finishes. If there's an option to reverse it, I'd be interested in implementing that.

[SimoTod]

You can have something like x-init="$el.style.display = 'none'"

[ekwoka]

The above works, but having a loading bar likely is a major UX issue...

[josfaber]

Have an isLoading = true in your data at the highest level, on loaded / fail make it false.
Have a loader div react to the data with x-show="isLoading" and initial css so it's visible during init and until loading has finished.

I.m.h.o. x-cloak is a flag only for hiding elements during init and not something that "finishes"

[ekwoka]

Or flip the logic for that one

.loading-bar {
  display: none;

  &[x-cloak] {
    display: block;
  }
}