-4

I am using react-router for navigation. I wat the transition between routes to be like that of youtube and facebook. I have API calls in each component on mount. I am trying to prevent the next url (component) from loading until it has fetched the data (like youtube). Instead what I want is that the current component remain visible with a top progress bar until the next url( component) has finished getting its data. How can I get this done in react? Thank you

NduJay
  • 760
  • 1
  • 10
  • 23
  • This is a little vague. Do you already have code written? Do you have your progress bar already? Are you asking how to render it or how to style it? Sharing code with a specific problem is a better way to get your question answered. – Michael Cox Aug 27 '19 at 13:44
  • I dont ecause I am a little lost – NduJay Aug 27 '19 at 13:45

1 Answers1

0

You would need your fetch to take place in a parent component. Then, you can render whichever component you want based on the state of fetch. If fetching is done, render the NewComponent. If still fetching, render the CurrentComponent.

import React, { useState } from "react";
import ReactDOM from "react-dom";

const CurrentComponent = () => <div>I am current</div>;
const NewComponent = () => <div>I am new</div>;

const App = () => {
  const [loading, setLoading] = useState(true);

  // this simulates your fetch
  setTimeout(() => {
    setLoading(false);
  }, 2000);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Component:</h2>
      {loading ? <CurrentComponent /> : <NewComponent />}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Or with React-Router:

Do your fetch and when your fetch completes use history.push to go to your new route. See this post.

Michael Cox
  • 1,116
  • 2
  • 11
  • 22