Skip to content

Conversation

@sanne-san
Copy link
Contributor

Changes

  • Add skeleton as loading state for initial page load.
  • Add loading states for tab and datepicker transitions, where data is faded and pulses until new data is loaded.
  • Speed up default Tailwind pulse animation.
  • Add smooth bar width transitions for when switching between reports.

Dark mode

  • The UI has been tested both in dark and light mode

Copy link
Contributor

@zoldar zoldar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice solution! It's way simpler than what I've anticipated. I've falsely assumed that patch application would look messy if transition effect didn't hide it. It's atomic enough to not cause cascades of reflows, cool. Also, awesome that phx navigation loading class could be reimplemented for full LV ✨ That will be a great help in other places too.

NOTE: As it's a PoC for now, I won't focus on minutiae of code organization or implementation details which are not too relevant at this stage. Whatever we come up with here will be rewritten anyway treating the current spike as a reference.

window.addEventListener('phx:page-loading-start', (_info) => topbar.show())
window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide())

const dashboardContainer = document.getElementById('live-dashboard-container')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, that's nice 👍 Might help simplify loading state selectors I'm currently using in my branch.

@zoldar zoldar merged commit 22b978c into liveview-dashboard Jan 19, 2026
18 checks passed
@zoldar zoldar deleted the sanne-loading-states branch January 19, 2026 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants