Gatsby Styles Breaking -- Netlify Deployment - reactjs

Question

This is my first post here, so forgive me if I am not upfront with anything.
I have a Gatsby site that is being deployed via netlify.
Been running into a very random bug that I have searched the dark reaches of the internet but cannot find the fix for.
Intermediately, the site styles on my website break completely. Upon inspecting, I see my global.css file isn’t being applied. Upon a refresh, this issue goes away.
Site is accessible by this link: https://ellicottrealty.netlify.app/ 2
Upon looking online, I see that I should define the css export in my Gatsby-browser.js file.
I have done so explicitly by writing the following:
const React = require(“react”)
// gatsby-browser.js
import “./src/global.css”
However this is still happening in my app.
Screenshot attached for reference. Any help would be very helpful!
Thanks Guys!
Example of Broken Styles
Loom video for better visual context: https://www.loom.com/share/05e9234636304eeea44d2ae8337c542c

Answer 1

I think you're looking at a symptom and not the cause. I see that your site is loading infinitely on the /properties route. It's very hard to debug the problem without the total context, but I believe the infinite loop is in this code.
React.useEffect(() => {
console.log("ran");
if (searchOptions) {
console.log(searchOptions);
if (searchOptions.label) {
console.log(searchOptions.label);
Cookies.set("locationLabel", JSON.stringify(searchOptions.label));
}
console.log("ran");
services.repliers.getListings({ ...searchOptions, page }).then(setListings);
}
}, [searchOptions, page]);
Like I said before, it's hard to figure out what your exact problem is without enough context. Maybe you should add listings to the dependency array as well?