Tabledrag creates jank (layout shift) on page load

Seems to follow same solution from 🐛 Table filter creates jank (layout shift) on page load Fixed

Tested using Firefox as Chrome doesn't support this yet and verified that the issue appears to be addressed.

I'm triaging RTBC issues → . I read the IS and the comments. I didn't find any unanswered questions or other work to do.

Leaving at RTBC.

Whitespace nitpick.

Chrome 120 started supporting this so it feels like this would be good to get in: https://caniuse.com/?search=css-media-scripting

The spellcheck script isn't working, I think this means the MR needs rebasing.

Kind of tricky task, which requires much more than just scripting media query.
Here is a snippet of only the problem i was able to solve

@media (scripting: enabled) {
  .draggable-table:not([data-once]) {
    margin-top: calc(28rem / 16 + var(--space-l));
  }
}

The snippet above is for selector .tabledrag-toggle-weight-wrapper only. Once this element is not created yet by js (but with the help of CSS class draggable-table added to the table we already know our table will be draggable -> we can prevent vertical layout shifting.

===========

However for the rest of things:
1. like table column "Weight" which can be hidden/visible based on localStorage
2. also dropbutton links which are expanded by default (while no js)
3. Dragging icon on the left side of each draggable row
-> this is all creates a lot of layout shifting and unfortunately we can not solve these 3 issues just by CSS media scripting query.

Here is more detailed answer.
Regarding column "Weight" - in the initial DOM render we don't know which column exactly should have visible/hide functionality. This is all done by javascript logic and also it is based on localStorage. For example if "Show row weights" button was clicked and then you will refresh the page -> Weight column will be shown by default (based on localStorage). So from CSS we are not able to get the states from localStorage (obviosly) and we don't have selectors we could use for.

Regarding dragging icon on the left side -> same situation. When "Weight" column is shown - we don't have Dragging icon anymore (coz ordering should be handeled by Weight selectbox) and this logic is done on js side and again based on localStorage.

Regarding dropbutton links <- one of the problems we can solve, but it smells like another task where we need to fix first dropbutton links only.

Also current MR https://git.drupalcode.org/project/drupal/-/merge_requests/5782 doesn't doing anything, since className `.tabledrag-hide` appears from JS. Moreover we can't just use `display: none;` here, because if "Show row weights" button was pressed -> Weight column should be visible by default.

Removing Novice tag following #13.

Regarding my message #13 🐛 Tabledrag creates jank (layout shift) on page load Needs work i see dropbutton links already were fixed & closed in https://www.drupal.org/project/drupal/issues/3361315 🐛 Dropbutton quickly shows/hides its menu on pageload causing layout shift Fixed

Here is my attempt to fix vertical layout shifting and a workaround of "Show row weights" functionality. Previously this button (Show row weights) was added from javascript which creates visual layout shifting (see before/after patch videos below). I decided to change logic a bit, see merge request.

Before patch:

After patch:

Changing status of the ticket to "Needs review" just to bump this issue & discuss this task more carefully. However the fix i provided is not enough to close this ticket, since the biggest layout shifting creates "Weight" column (see explanation #13 🐛 Tabledrag creates jank (layout shift) on page load Needs work )

Replicated same issue and applied MR !5782 but issue is still remain so moving this to NW.