The Neo.component.CountryFlag component has been identified as the source of "Forced Reflow" violations during Grid scrolling.
The current implementation switches the VDOM tag between img and span depending on whether a flag URL is available. This triggers frequent node removal/insertion during scrolling, which, combined with the lack of explicit dimension attributes on the img tag, causes layout thrashing.

Optimization Strategy:

1. CSS Containment: Apply contain: strict to .neo-country-flag (the container) to isolate layout calculations.
2. Stable VDOM Structure: Instead of swapping tags (img <-> span), maintain a stable DOM structure to avoid removeNode/insertNode operations.
   • Proposed Structure: Always render an img tag. If no flag is available, set src to a transparent pixel (or handle via CSS visibility) and potentially toggle a class like .neo-country-placeholder.
3. Explicit Dimensions: Add width="20" and height="20" attributes to the img VDOM node to prevent layout shifts during image loading.

Implementation Steps:

1. Modify resources/scss/src/component/CountryFlag.scss: Add contain: strict to the main wrapper.
2. Modify src/component/CountryFlag.mjs:
   • Refactor afterSetLocation to maintain a stable img tag.
   • Add explicit width and height attributes to the img config.
   • Handle the "no flag" state by hiding the image or using a placeholder source, avoiding tag replacement.