React: Content loading after component is rendered

I’m building a movie web app to work on my React skills… Im having this issue that I’ve been trying to tackle for a few days and need some help.

If you click on a movie, when the information page comes up, theres a split second where there are no images, no text, invalid date, etc. All this info is being pulled in from an api…the component loads, and then refreshes when the content loads.

Ive researched how to make the content load after it has the information, how to make the information load faster, tried to find out if Im having async issues…nothing I find helps, so not sure if Im way off or just missing the mark by a bit.

I’m so close to done, and this bit is driving me nuts. Any insight would be GREATLY appreciated!

Heads up, Im aware the trailers dont work…I want to try and tackle that on my own before I get help with it.

Here’s the site: http://clickiton.surge.sh/
Here’s my github: https://github.com/cndragn/clickiton

Here’s the specific location of my components for the movie listings, Movie.js is the top level: https://github.com/cndragn/clickiton/tree/master/src/components/movie

Typically, the way I handle such issues is with conditional rendering, for instance in your Movie component (movie.js) you can conditionally render like so…

render(){
   if(this.state.movie.length){
    return (>>your usual your component logic)
   }
return null
}

Here I am assuming the array this.state.movie will be filled once it has fully loaded, I may be wrong as I haven’t looked at your code in detail, but if that is not the case then you can use any other signal that is updated in the state once the movie loaded. This way, If the signal has not occurred your component will simply return blank, alternatively you can use return <div className="fancyloadingwheel"/> and create a styled loading wheel in css in case you don’t want to show a blanked out component.

Really nice lookin app, BTW.

1 Like

Thank you!! That was actually the last thing I tried before I threw up my hands…I had tried it with the backdrop image though, thats what shows up behind the poster and movie description in the header of the movie pages, since that is the most noticeable and last to load up.

I put the conditional in Movie.js, right above return, and it loaded the header, but nothing else …the rest of the page was blank and my console lit up with async errors. I also tried moving the entire return into a conditional statement into a function, and just call the function in my render, but the same thing happened…header, no content.

Kinda reassuring though that Im probably on the right track…the header is in its own component, so Ill try and see if I can put the conditional in there instead…and if that doesnt work, will try the loading wheel for the header…I hadn’t thought of using that!

Glad you like the app!! Phase II is to add user login to be able to write reviews, create a list of seen, want to see movies. Maybe add a social media aspect to add friends and view a timeline of movies others have seen and be able to comment on it. Lots of ideas :blush:

Sometimes it’s all about user perception.

Only update the section/div of the site that needs updating.

Adding little CSS transitions (fade in/fade out, slide in, etc) can help eliminate that “blank” page look, and also gives extra time for the backend to pull up the data, or the large graphic images to load.

BTW, nice site!

Eeep Im glad you like it Owel! (btw, hiii! Havnt seen you around and excited to see you’re still popping in!) Yeah, it makes total perfect logical sense to only update the component thats giving me trouble. I was thinking I should do it in its parent component since thats where the data is pulled in from.

Good call on the CSS transitions too…okay, I think Im about ready to tackle this some more now that I have a few things to try. Yeah, its 2p and Im finally getting my day started (I was up til 5a working on this thing…:tired_face:)