Hello everyone,
I’m working on integrating Builder content into my React app while keeping a static layout with a navbar and footer, similar to the approach described here.
In my app, I use the following code for data fetching:
React.useEffect(() => {
fetchOneEntry({
model: getModelName(window.location.pathname),
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: window.location.pathname,
},
options: getBuilderSearchParams(new URL(location.href).searchParams),
})
.then((content) => {
if (content) {
setContent(content);
}
setNotFound(!content);
})
.catch((err) => {
console.log("Oops: ", err);
});
}, []);
I then render the content using the <Content />
component (imported from @builder.io/sdk-react
), passing the content
state as a prop.
The issue I’m facing is the flicker that occurs because the data fetching takes some time. Initially, only the navbar and footer are displayed on the screen until the content is fetched.
To handle this, one solution I thought of is to return null
if the content hasn’t loaded yet, like so:
if (!content) return null;
However, this causes a blank white screen while the data is being fetched, which is not ideal.
Does anyone have a more elegant solution to handle this? I’d appreciate your suggestions!