React - Show Hide Two Elements Without Flickering On Page Load

Edit. I rewrote the code to be even more minimalist. The below code is a spike test of my issue. Here is a video of the issue: https://imgur.com/a/WI2wHMl I have two components. T

Solution 1:

Why don't you include a flag which indicates if you have already got data from IndexDB, something like:

functionTest(props){
   const [loading, setLoading] = React.useState(true);
   let [workflows_list_array, set_state_of_workflows_list_array] = useState([]);

   let [client_id_number, set_client_id_number] = useState(5);
      useEffect(() => {
         db.workflows.toArray((workflows_list)=>{
         }).then((workflows_list)=>{
         }).finally(() =>setLoading(false)); //when process finishes, it will update the state, at that moment it will render TextEditor or Workflows
    }, []);

   if(loading) return<LoadingIndicator/>; // or something else which indicates the app is fetching or processing datareturn(
        <div>
          {workflows_list_array.length ? null : <TextEditor/> }
          {workflows_list_array.length ? <Workflowsworkflows={workflows_list_array}/> : null}

        </div>
    )
}


exportdefaultTest

When the process finishes, finally will be executed and set loading state to false, after that, your app will render TextEditor or Workflows