Use <LoadingFrame> component to reduce content layout shift (CLS)

[glenbraun]

Google is flagging us for a low CLS score

https://web.dev/cls/

https://trello.com/c/IykqFcaE

[PeterBreen]

#573 includes some changes which result in a huge improvement to CLS - project and group pages now have CLS values reduced by just over 90% by using <LoadingFrame /> to ensure less visible content shift while waiting for backend data to return. For any other pages which match this pattern, use of LoadingFrame should improve CLS there also. Testing of different height values to get the best return on CLS is also needed; I just picked a value which worked but isn't optimized for the purpose.

[PeterBreen]

To close this item specifically I think we need to audit all our pages for CLS. The homepage does quite well; Lighthouse gives me 0.029, but Find Projects gives 0.26 and Find Groups gives 0.319 -- not great for either of those.

So,

• audit all pages for CLS (browser devtools Lighthouse reporting is sufficient)
• use <LoadingFrame /> on pages which don't currently have it to help reduce CLS
• further changes as needed, but it's likely that's enough given the results from Group profile page update #573 as mentioned previously.

[PeterBreen]

An example of how to use LoadingFrame for a page where the whole page content needs to wait for API return: https://github.com/DemocracyLab/CivicTechExchange/blob/506de6a6c74b04de7dbe1925ffe89d427171907a/common/components/controllers/AboutProjectController.jsx#L91C6-L95

not all pages can return error codes, but for ones that do follow this pattern. Show either a load or error message if API request data hasn't been returned yet, render the page when it has.

And for an individual component which has to wait:
https://github.com/DemocracyLab/CivicTechExchange/blob/506de6a6c74b04de7dbe1925ffe89d427171907a/common/components/common/carousel/BlogCarousel.jsx (see Line 34-55)

I think almost all uses will be the first example (page content level) rather than component, but both are viable.

Any further SEO or CLS fixes can go in another branch. Let's just reuse our existing components for now.