search

cisagov / manage.get.gov

A Django-based domain name registrar to communicate with an EPP registry
https://get.gov
Other
60 stars 18 forks source link

Sort on dynamic tables: Overriden JS causes flashes of content #2954

Open rachidatecs opened 1 week ago

rachidatecs commented 1 week ago

Current Behavior

On our dymanic (Ajax) tables, we ignore the USWDS JS sorting on the frontend and we instead make a new Ajax call that sorts on the backend. In certain cases, the JS sorts the content on the page before the full (all pages) sorted content comes back and the DOM is redrawn. This can cause a short flash of incorrectly sorted content when the backend is slow and the JS is fast.

Expected Behavior

No flashes of incorrectly frontend sorted content.

Steps to Reproduce

  1. Go to a dynamic tables with multiple pages of content
  2. Click on a sortable TH

Environment

No response

Additional Context

This is a benign bug that could be a bit tricky to cleanup correctly. The forntend sorting handles icon updates on the TH in addition to some accessibility tag and content updates.

We would need to decouple Ajax and JS sorting or implement a clean separation of concerns without breaking the USWDS full frontend sorting which is used elsewhere on our site. One solution is to override USWDS JS for dynamic tables only, another is to create our own simplified version of the USWDS sorting code.

Issue Links

No response

h-m-f-t commented 2 days ago

I have seen these flashes but they haven't interrupted my flow or harshed my vibes. I could deal with this, especially if the fix is gnarly. Deferring to dev parking lot.

abroddrick commented 2 days ago

Added a 3, it is finicky but not something that should take longer than a sprint. It will not solve flashing everywhere, just on the sort on tables. You may still see flashing content in other locations.