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
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,
<Helmet>
<script async src="https://cse.google.com/cse.js?cx=123:456"></script>
</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:
- Why is this happening?
- How can I debug and fix it?
Recommended Answer Recommended Answers (1)
Recommended Answer
Most Relevant Answer
Hi I solved the problem now.
import React from "react"
import { Helmet } from "react-helmet"
after reading Josh's post: The Perils of Rehydration I think the problem I encountered was similar. So I did something like this.
I create a folder called hooks and write a ClientOnly.js there. As below:
function ClientOnly({ children, ...delegated }) {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return (
<div {...delegated}>
{children}
</div>
);
}
export default ClientOnly
Then I wrote another search.js in the component folder, as below:
const search = () => {
return (
<div>
<Helmet>
<script
async
src="https://cse.google.com/cse.js?cx=123:456"
></script>
</Helmet>
<div className="gcse-search"></div>
</div>
)
}
export default search
Then I imported them whenever I need them as :
<ClientOnly> <Search /> </ClientOnly> recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Most Relevant Answer Most Relevant Answers (0)
All Replies (9)
Recommended Answer
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!
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!
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
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
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
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 .
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
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
recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
Recommended Answer
Most Relevant Answer
Hi I solved the problem now.
import React from "react"
import { Helmet } from "react-helmet"
after reading Josh's post: The Perils of Rehydration I think the problem I encountered was similar. So I did something like this.
I create a folder called hooks and write a ClientOnly.js there. As below:
function ClientOnly({ children, ...delegated }) {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return (
<div {...delegated}>
{children}
</div>
);
}
export default ClientOnly
Then I wrote another search.js in the component folder, as below:
const search = () => {
return (
<div>
<Helmet>
<script
async
src="https://cse.google.com/cse.js?cx=123:456"
></script>
</Helmet>
<div className="gcse-search"></div>
</div>
)
}
export default search
Then I imported them whenever I need them as :
<ClientOnly> <Search /> </ClientOnly> recommended this
marked this as an answer
Recommended based on info available
Our automated system analyzes replies to choose the one that's most likely to answer the question. If it seems to be helpful, we may eventually mark it as a Recommended Answer.
Most relevant based on info available
Our automated system analyzes the replies to choose the one that's most likely to answer the question.
This question is locked and replying has been disabled.
Link to post
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.
This reply is no longer available.
Badges
Some community members might have badges that indicate their identity or level of participation in a community.
