Header: Replace Suspense Fallback for SearchBar

[tjwiebell]

Description

Fix edge case scenario on slow devices where Suspense temporarily loads a fallback component while the SearchBar component is being loaded.

Related Issue

Closes #1273

Verification Steps

1. Simulate Slow 3G in network tab and navigate to /search.html?query=top
2. Observe new placeholder where search icon used to be misaligned

How have YOU tested this?

Ran yarn test and manually checked above steps

Screenshots / Screen Captures (if appropriate):

Proposed Labels for Change Type/Package

• major (e.g x.0.0 - a breaking change)
• minor (e.g 0.x.0 - a backwards compatible addition)
• patch (e.g 0.0.x - a bug fix)

Checklist:

• I have updated the documentation accordingly, if necessary.
• I have added tests to cover my changes, if necessary.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://venia-git-feature-search-suspense-component.magento-research1.now.sh

[PWAStudioBot]

	Messages
📖	We are currently working on automating the PR metadata checks. Until that time, you may see failures related to labels/description/linked issues/etc even if you have fixed the problem. Failures will persist until the next push (assuming they are fixed).

Generated by 🚫 dangerJS against fc4619b

[dpatil-magento]

QA Pass. @sirugh If new changes are good, please go ahead and merge this one.

[sirugh]

Just one request before we merge.

[sirugh]

This value comes from searchBar.css as we want the placeholder to look identical to the searchBar once it loads. I think this should be a constant somewhere shared between both css files so we only have to update in one place in the future.

[sirugh]

Not to nitpick but on my screen this is super light and really difficult to see. If this value is from the mocks, fine, but maybe it needs to be darker.