Dawn theme header loading troubleshooting

Store Design
,

Topic summary

A user is experiencing an unwanted loading spinner appearing in the header of their Dawn theme store, specifically related to the predictive search feature.

Root Cause Identified:

  • The loading icon appears because the predictive search CSS (component-predictive-search.css) loads asynchronously, causing a brief visibility of the spinner before styles are applied.

Proposed Solutions:

  1. CSS Loading Optimization (Primary recommendation):

    • Modify layout/theme.liquid to load the predictive search stylesheet synchronously instead of asynchronously
    • Replace lines 78-83 with: {{ 'component-predictive-search.css' | asset_url | stylesheet_tag }}
    • Alternatively, use preload attribute and move the stylesheet higher in the file

  2. CSS Override Method (Alternative approach):

    • Add custom CSS to base.css to hide the spinner specifically in the header: .header-wrapper .loading-overlay__spinner { display: none !important; }
    • A more aggressive option hides all spinners site-wide if needed

Status: Multiple solutions provided; awaiting user implementation and feedback.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

I’m using the Dawn theme in this. I need to troubleshoot why there is a loading in the header part. I don’t want that. How can I remove this.

website: Amber Silverz

password: amber

image
image1873×1058 92.5 KB

2

Reach out to whoever added search field to your header – it’s part of the predictive search modal…

3

@tim_1 Thanks for your reply, whether this is app related or this search bar customization related

4

Customization, I guess…

5

Hi @Sivadarshan,

This may be because the predictive search css is loaded later, so the loading icon will be visible.

Please go to layout > theme.liquid file, find ‘component-predictive-search.css‘ and change code:

Screenshot
Screenshot1738×662 90.4 KB

Code:

{{ 'component-predictive-search.css' | asset_url | stylesheet_tag }}

If I helped you, then a Like would be truly appreciated.

6

@namphan, If i remove those code, there will be no loading right

7

What @namphan is saying is that instead of the code on lines 78-83, you can use the code they suggested.

I’d say you can simply remove lines 81 and 82 – would be the same.

This will ensure this stylesheet loads ASAP.

Ultimately, you can try

{{ 'component-predictive-search.css' | asset_url | stylesheet_tag: preload: true }}

and move it up to be next to the

8

Hi,

Hope this will help

  • Add CSS at base.css

CSS example

/* Hide the brown loading ring in the HEADER only */
.header-wrapper .loading-overlay__spinner,
.header-wrapper svg.spinner {
  display: none !important;
}
  • If it still shows, hide all spinners (Optional)

Code example

/* Nuclear option: hide every spinner on the site */
.loading-overlay__spinner,
svg.spinner {
  display: none !important;
}
  • Make your logo load first (so the header doesn’t ‘wait’)