Implement lazy loading for combobox technology icons using IntersectionObserver

[max-ostapenko]

The log entries indicated that an incoming request to the report-api backend service was denied with a 403 Forbidden status code by a Google Cloud Armor security policy. Specifically, the request from particular IPs exceeded the rate limit threshold defined in the policy named report-api-backend-security-policy.

This means:

• The individual client IPs make an abnormally high volume of requests.
• The default rate limit threshold configured in the Cloud Armor policy is too restrictive for our users.

The solution:
Optimized the technology dropdown list to prevent fetching 2,000+ technology icons simultaneously on load or filter, avoiding overwhelming both the client browser's connection limit and the CDN.

[tunetheweb]

This loading=lazy attribute means all this code shouldn't be needed.

However, it seems to me Safari is not honouring this and loads everything 😔 It seems to work fine in Chrome and Firefox. But then we see the error in Lighthouse too, which uses Chrome 🤔

But this does seem to fix it for Safari. Is that why you're adding this? Or are there other reasons? I think we should add a comment here.

Suggested change

	const hasObserver = typeof IntersectionObserver !== 'undefined';
	// Safari doesn't seem to honour `loading=lazy and loads all icons
	// so use a manual IntersectionObserver for now.
	const hasObserver = typeof IntersectionObserver !== 'undefined';