When the Next js page loads, it briefly displays a 0 at the top for a moment before loading the rest

When my nextjs app loads a page, there is a momentary appearance of a 0 in the top left corner. This happens even if I am fetching data from Sanity CMS using getStaticProps and returning content. Interestingly, I have observed that simply returning an empty fraction still triggers the brief appearance of the 0.

  return <>{Object?.keys(finalContent).length && <></>}</>;

However, If I return just the empty fraction without checking for

Object?.keys(finalContent).length &&

the 0 does not show up anymore

  return <></>;  // no 0 in the page

Does anyone know how to eliminate this unexpected behavior?

https://i.sstatic.net/qdl7M.png

javascriptnext.js

Answer №1

To ensure that the data was successfully fetched, you are using 

Object?.keys(finalContent).length
.

In JavaScript, there is short-circuit evaluation, meaning:

  • 0 && 3 evaluates to 0
  • 3 || 0 evaluates to 3
  • Similarly, if 
    Object?.keys(finalContent).length
    is 0, it's like 0 && x, which results in 0

In React.js, only a falsy value of 0 actually renders (null, undefined, and "" do not render).

So, when the length of the data array is 0, a 0 is rendered onscreen.

The solution could be converting the falsy length of 0 to a boolean false and all other truthy lengths >0 to true like this: 

!!(Object?.keys(finalContent).length)

Final code snippet:

    return <>{!!(Object?.keys(finalContent).length) && <></>}</>;

Now, if 

Object?.keys(finalContent).length
is 0, it will be converted to false and React won't render it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating server-side variables from the client-side in Next.js

There is a code snippet in api/scraper.js file that I need help with. const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, ...

javascriptnext.jsserver-sideclient-side

transmitting error messages from a service to a controller in AngularJS

Controller.js var vm = this; vm.admin = {}; vm.add = function () { API.addAdmin(token, vm.admin) .then(function (resp) { vm.hideForm = true; vm.showButton = true; Notify.green(resp); }, function (re ...

javascriptangularjshttp

Struggling to import MUI components from node modules in your React JavaScript project using Vite? Discover why autosuggestion isn't getting the

Encountering a dilemma with autosuggestion in Visual Studio Code (VSCode) while attempting to import MUI (Material-UI) components from node modules in my React JavaScript project built with Vite. The autosuggestion feature is not working as intended, causi ...

javascriptreactjsvisual-studio-codematerial-uivite

Retrieve the node-postgres result and store it in a separate object beyond the callback function

Currently, I am in the process of converting a data profiling script originally written in Python to JavaScript while following the Wes Bos beginner Javascript Course. This script is designed to take database connection details and a specified target tabl ...

javascriptnode.jspostgresql

Is this jQuery script not functioning properly?

I came across this code on jsfiddle, and I really want to incorporate it into my PHP file. However, when I tried to do so, it didn't work even though I simply copied and pasted the code without making any changes. Here is my code: <!DOCTYPE html& ...

javascriptphpjquery

Implementing a JQuery modal with backend coding

I have encountered a problem in my ASP.NET code-behind where I am trying to incorporate a modal popup. Despite my efforts, I have not been able to successfully implement it. Do you have any suggestions on how I should proceed with this process? <scrip ...

javascriptjqueryasp.netmodal-dialogbootstrap-modal

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

cssnext.js

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

Looking to create an offline web application, I'm in the process of transitioning from Ajax to JSON using JQuery offline. Here is the initial Ajax code: $.ajax({ url: contentpage, data: contentpagedata, cache: false }).done(function( html ) { ...

javascriptjqueryajaxjsonhtml

Can a function be activated in JavaScript when location permission is declined?

Background: Following up on a previous question regarding the use of getCurrentPosition and async functions. I am currently working on The Odin Project and attempting to create a basic weather application. My goal is to include a feature that automatically ...

javascriptasync-awaitpromisepermissionsgeolocation

Unlock the ability to retrieve atom values beyond RecoilRoot

In my project, I am utilizing "react-three/fiber" to contain all content within a "Canvas." Additionally, I am using Recoil's atom to store states and share them with other modules inside the "Canvas." While everything works great inside the RecoilRo ...

javascriptreactjsthree.jsreact-three-fiberrecoiljs

Executing a JQuery click event without triggering a page refresh

I'm dealing with a basic form on a webpage <div class="data-form"> <p>Are you hungry?</p> <form> <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label> ...

javascriptjqueryajax

Using JavaScript to analyze and handle newlines, spaces, and the backslash character

Hello everyone, I'm hoping things are going well. I am currently working on removing newline and "\" characters from a string that I have after using JSON.stringify(). The string in question appears as follows: "[{\n \"id_profile&bs ...

javascriptregexjson

The unique text: "User-defined input element disregards changes initiated through

I created a custom input component that functions correctly, but I have encountered an issue. When I attempt to update the value through a method, the model gets updated but the input value remains unchanged. Here is my component: https://codepen.io/ken-r ...

javascriptvue.jsvuejs2bindingvue-component

Creating a basic bar chart using NVD3 with X and Y axes in AngularJS

I'm currently utilizing the nvd3.js plugin within my angular-js application. I have a straightforward task of creating a bar chart, where bars represent months along the x-axis and revenue values on the y-axis. My goal is to accomplish this using the ...

javascriptangularjsd3.jsangularjs-directivenvd3.js

No action is triggered after submitting AJAX data in a WordPress environment

I'm currently working on developing a WordPress plugin that requires querying the database. However, I am facing challenges in getting it to function properly. Here is the code snippet that I have attempted: jQuery('#demo_ajax').submit(func ...

javascriptphpjqueryajaxwordpress

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...

javascripthtmlangularjs

Exploring values within an array of objects using Node.js

I have some data presented in the following format [ [ '@test','1.2.6' ], [ '@test2','4.0.1' ], [ '@test3','2.2.0-unstable' ], ... ] My goal is to extract all values that include -unstable, ...

javascriptnode.jsarraysfor-loop

I am currently working on determining whether a given string is a palindrome or not

I'm currently working on a function that checks whether a given string is a palindrome. So far, my tests are passing except for the following cases: (_eye, almostomla, My age is 0, 0 si ega ym.) This is the function I've implemented: function pa ...

javascript

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

Struggling to get my DateTimePicker component (could be DatePicker) working after following installation instructions from various sources. I've spent a day and a half attempting to make it functional without success. If you can help me create a separ ...

javascriptreactjsmaterial-uicomponents

AngularJS: Modifying values in one div updates data in all other divs

The webpage appears as shown below: https://i.sstatic.net/IxcnK.png HTML <li class="list-group-item" ng-repeat="eachData in lstRepositoryData"> <div class="ember-view"> <div class="github-connection overflow-hidden shadow-oute ...

javascripthtmlangularjs