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

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!