How to avoid or minimize delays when applying styles for mobile?

Question

css

There is a layout to which styles are applied according to the desktop first principle.
For the mob, everything is implemented with a media query.
But here there is a problem. Some elements are changed by styles quite significantly, their location changes - higher - lower, width, height, etc., etc. When reloading the page in mobile resolution, such elements are first drawn according to the layout and styles for the desktop, and only after a certain time delay are the styles for mobile pulled up and everything falls into place. It's just that when you reboot, the layout seems to "jump".
Here is an example of what I mean - the search input, first takes the width specified for the desktop, and only after some interval it is already 100%. Well, you can see how everything jumps further.
video screen
How to most effectively smooth out such "jumps" - it is clear that everything takes some time, but still.

Answer 1

Usually they make a preloader https://itchief.ru/javascript/how-to-make-preloade...