The issue was that initial dimension/coords calculations were wrong because the DOM elements did not exist in the document. So while useLayoutEffect corrected the flickering issue, it still could not fix the 1st time the list appeared in the document.
The chosen solution was to keep the list elements always inside the document but hidden, so that the 1st time a dimension/coord calculation happens it can yield correct results.
Another change made was that the DOM element refs are now kept in state, since they were used as dependency arrays to hooks.
orfium-sonarqube-app[bot]
commented
7 months ago 
Description
Resolves NDS-881
The issue was that initial dimension/coords calculations were wrong because the DOM elements did not exist in the document. So while
useLayoutEffectcorrected the flickering issue, it still could not fix the 1st time the list appeared in the document.The chosen solution was to keep the list elements always inside the document but hidden, so that the 1st time a dimension/coord calculation happens it can yield correct results.
Another change made was that the DOM element refs are now kept in state, since they were used as dependency arrays to hooks.
Screenshot
Test Plan