Investigate possibility of creating API, CSS class, reusable animation to help eliminate page jank

Maybe for the js-hide class we could use the media query to make sure we hide things asap. Would be good to try it out see if that helps some UI

Maybe for the js-hide class we could use the media query to make sure we hide things asap.

We already got that committed in 🐛 Table filter creates jank (layout shift) on page load Fixed . See https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/syste...

Here's a quick approach to tackle page jank:
1. CSS Fixes:
Reserve Space for Content: Use min-width, min-height, or aspect-ratio for images and iframes to prevent layout shifts.

img, iframe {
  min-width: 100px;
  min-height: 100px;
  aspect-ratio: 16/9;
}


Font Loading: Use font-display: swap to avoid layout shifts caused by late-loading fonts.
@font-face {
  font-display: swap;
}

Smooth Animations: Apply fade-in animations for dynamically loaded content to avoid sudden jumps.

.dynamic-content {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.dynamic-content.loaded {
  opacity: 1;
}

2. JS Fix:
Add a loaded class to dynamically added elements after the page loads to trigger smooth transitions.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.dynamic-content').forEach(el => el.classList.add('loaded'));
});

3. Drupal Setup:
Add the CSS/JS to a custom module or theme to apply across pages.

4. Testing:
Monitor metrics like Cumulative Layout Shift (CLS) to ensure improvements.
Let me know what you think!