How to get React page to render loading page

Question

So I have created a method inside of the App React component so that when someone goes to save, the DOM switches and renders the loading page, process the POST request, and then re-renders the original page.

  loadingPlaylist() {
    // Using pending variable to determine what to do next //
    
    let pending = false;
    
    if(pending === true) {
      return (
        ReactDOM.render(<LoadingScreen />, document.getElementsByClassName('app'))
      )
    }
    
    // trackCheck is checking if there is something in the playlist to save, if not alert should pop up.
    // If there is something to save, loading pending is changed to true and LoadingScreen renders
    const trackCheck = () => {
      if(!this.state.playlistTracks.length) {
        return alert('There are no tracks in your playlist dude');
      } else {
        pending = true;
      }
    }

    // Performs functions in order to run check. Checks if something is there to save, saves the info, 
    // then checks if the area is empty
    const isLoading = () => {
      trackCheck();
      this.savePlaylist();
      trackCheck();
    }

    isLoading();

    //Method is saved to a event listener
  }

I know if is probably garbage for a React App and nothing is currently working as intended. Need help to do this correctly.

score 1 · Answer 1 · answered Sep 01 '22 at 16:58

1

You can add this line inside your jsx page (replace YourComponent):

{pending ? <YourComponent /> : <LoadingScreen />}

answered Sep 01 '22 at 16:58

Aous Mohammad

802
2
16

score 0 · Answer 2 · answered Sep 01 '22 at 16:48

0

You don't need to manually interact with the DOM yourself. That's what React is for.

If you want to perform certain actions based on the lifecycle of your app then you can look at which functions React exposes.

In the case where you need to watch for updates what would help you is the useEffect hook (presuming you're using the latest functional components, if not then you need to look at the lifecycle methods on class components).

I suspect however you don't need the above. You can probably create a local loading state using Reacts useState hook. Then once your POST request is made you can set the loading state to true. Once your request is succesful you can set your loading state back to false. This state should conditionally render your component.

answered Sep 01 '22 at 16:48

msmoore

396
2
12

Thinking I'm starting to get it but still nothing new is happening in the browswer. I took out most of it. 1)Added a useState 2)Added a useEffect if there is nothing to be saved. 3)Added a function that checks if there is anything to save. 4)If so it changes the state to the component, then saves, then back to original. Let me know if I should send you link to Github so you can see. – Andrew_Casal Sep 01 '22 at 17:33
Yes send a link – msmoore Sep 01 '22 at 17:34
https://github.com/AndrewCasal/jammmingapp/tree/loading_page Under the "loading_page" branch – Andrew_Casal Sep 01 '22 at 17:37
You're trying to use a useEffect within a class component. You can only use useEffect and useState within functional components – msmoore Sep 01 '22 at 17:44
Would you mind clarifying the difference? I'm not sure I understand. Should I create a new file with the functional components and then import the function into the class componenet? – Andrew_Casal Sep 01 '22 at 18:26
They're different ways of writing components. https://stackoverflow.com/questions/53062732/react-function-components-with-hooks-vs-class-components – msmoore Sep 01 '22 at 19:12

How to get React page to render loading page

2 Answers2