Duplicated search bar rendering - Heavy cost + invalid DOM

[kira0269]

Gally Platform version(s) affected: 2.X

Description
The rendering of the search bar triggers 2 sub requests to display the search bar twice on the DOM.
It's heavy and the DOM is invalid at the end (ids are duplicated)

How to reproduce
Default configuration of twig hooks for the shop:

sylius_twig_hooks:
    hooks:
        'sylius_shop.base.header.content':
            search_bar:
                template: '@GallySyliusPlugin/shop/shared/components/header/search/search_bar.html.twig'
                priority: 250

        'sylius_shop.base.header':
            search_bar:
                template: '@GallySyliusPlugin/shop/shared/components/header/search/search_bar_mobile.html.twig'
                priority: 150

Possible Solution
For the rendering issue, 2 leads:

• replace {{ render(...) }} by {{ esi_render(...) }}. They are the same, except that esi_render can use HTTP cache only if it's enabled in the projet.
• since Sylius uses live components, you can use Twig components to render the search bar

For the duplicated DOM issues, 2 leads:

• using twig component, each component templates will define unique ids to not conflict with the other search bar
• depending on the breakpoint, instead of simply show/hide the correct search bar (they are not at the same location), use stimulus controller to move the html tag through the DOM.

Additional Context
I'm a colleague from Smile. If you need more information, contact me at @Vasal