/programmable-search/community?hl=en
This content is likely not relevant anymore. Try searching or browse recent questions.
-
Google Custom Search Box doesn't appear on first load in my Gatsby project, only appears second load 1 Recommended Answer 9 Replies 1 Upvote
1 Recommended Answer
$0 Recommended Answers
1 Relevant Answer
$0 Relevant Answers
Goal:
when site is loaded it should have the search box together with menu items in the navigation bar.
See the picture below: 


Problem:
Currently on first load the google custom search box doesn't appear. However, when you reload/refresh the page, it will appear as normal and functions as normal. But this is annoying as people might not know I have the search box until they refresh or reload the page. This is what it appears like on first load.


I have tried:
According to google's instruction, I have done things like below: In my gatsby project's nav component,
import { Helmet } from "react-helmet" ... 
 <Helmet>
 </Helmet> 
 <nav className="nav" > 
 <div className="nav-container">
 <Link to="/">Home</Link> 
 <Link to="/blog">All</Link>
 <Link to="/tags/food">Food</Link>
 <Link to="/tags/style">Style</Link>
 <Link to="/tags/living">Living</Link> 
 <Link to="/tags/travel">Travel</Link> 
 <Link to="/about">About</Link> 
 <div className="gcse-search">
</div> 
 </div> 
 </nav> 

 {/* mobile only nav */} 
 <nav className="menu-mobile">
 <div role="button" tabIndex={0} onClick={handleClick} onKeyDown={handleClick}> 
 <img src={menuIcon} className="hamburger-menu-icon" alt="hamburger menu icon" title="menu" />
 </div>
 <div className={isMobile}> 
 <Link to="/">Home</Link>
 <Link to="/blog">All</Link> 
 <Link to="/tags/food">Food</Link> 
 <Link to="/tags/style">Style</Link>
 <Link to="/tags/living">Living</Link>
 <Link to="/tags/travel">Travel</Link> 
 <Link to="/about">About</Link> 
 <div className="gcse-search">
</div> 
 </div>
 </nav> 
 </>
I did use devtool and saw there seems to be nothing loaded into the div where search box is supposed to appear. I have no idea why is that.
You can test the problem on website live here.
Question:
  1. Why is this happening?
  2. How can I debug and fix it?
Most Relevant Answer Most Relevant Answers (0)
All Replies (9)
-
Most Relevant Answer
Hi, I have since changed the "async" attribute to "defer" and tested it in private/incognito mode and here is the result:
LinuxMint:
Chromium : OK
Firefox: OK

Manjaro (Linux)
Chrome: OK
Firefox: flashes but doesn't load

Windows: Firefox: still flashes and doesn't load
 Edge: mostly OK but sometimes it doesn't work

Iphone:
Safari : needs refresh/reload twice before it appears
Chrome: OK

Android:
 Chrome: OK

If anyone can tell me why it would be great!
marked this as an answer
Most relevant based on info available
Most Relevant Answer
Hi Annie,

Accessed your website in all the OS (Linux, Windows, MacOS, Iphone and Andriod) and browsers (Chrome, Firefox, Safari and Edge) and was not able to reproduce your problem. In all the OS/Browser I did see the magnifying glass icon (appears on first load itself) and clicking on it the search box got display and performing search results were displayed.

Thanks
marked this as an answer
Most relevant based on info available
-
Most Relevant Answer
Hi there, I have switched to algolia search since yesterday as I and my friends couldn’t figure out why the google custom search behave so strangely. The original google custom search has input and magnifier together and color was green. The algolia one has magnifier only and when you click it you will see input field .
marked this as an answer
Most relevant based on info available
Most Relevant Answer
Hi Annie,

In that case, to narrow down the problem can you please create a test page and host it on your website. Then only implement your CSE engine on this page by grabbing the CSE engine implementation code taken from the CSE control panel. Please do not implement any other code. Then access this test page and check if you are seeing the problem which you have reported.

Thanks
marked this as an answer
Most relevant based on info available
This question is locked and replying has been disabled.
Discard post? You will lose what you have written so far.
Write a reply
10 characters required
Failed to attach file, click here to try again.
Discard post?
You will lose what you have written so far.
Personal information found

We found the following personal information in your message:

This information will be visible to anyone who visits or subscribes to notifications for this post. Are you sure you want to continue?

A problem occurred. Please try again.
Create Reply
Edit Reply
Delete post?
This will remove the reply from the Answers section.
Notifications are off
Your notifications are currently off and you won't receive subscription updates. To turn them on, go to Notifications preferences on your Profile page.
Report abuse
Google takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.

Go to the Legal Help page to request content changes for legal reasons.

Reported post for abuse
Unable to send report.
Report post
What type of post are you reporting?
Google takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.

Go to the Legal Help page to request content changes for legal reasons.

Reported post for abuse
Unable to send report.
This reply is no longer available.
/programmable-search/threads
//accounts.google.com/ServiceLogin
You'll receive email notifications for new posts at
Unable to delete question.
Unable to update vote.
Unable to update subscription.
You have been unsubscribed
Deleted
Unable to delete reply.
Removed from Answers
Marked as Recommended Answer
Removed recommendation
Undo
Unable to update reply.
Unable to update vote.
Thank you. Your response was recorded.
Unable to undo vote.
Thank you. This reply will now display in the answers section.
Link copied
Locked
Unlocked
Unable to lock
Unable to unlock
Pinned
Unpinned
Unable to pin
Unable to unpin
Marked
Unmarked
Unable to mark
Reported as off topic
/programmable-search/profile/0?hl=en