react-current-page-fallback

Keep the current page rendered as a fallback until the new page is loaded with React.lazy and React.Suspense. Route level code splitting in react without screen flickering (React Suspense + React Router Dom + React Topbar Progress Indicator)

🛠️ Installation Steps

Using npm:

npm i --save react-current-page-fallback

Using yarn:

yarn add react-current-page-fallback

📖 Usage

import { FallbackProvider } from "react-current-page-fallback";

// Wrapp root FallbackProvider for all routes
<FallbackProvider>
  your app routes here...
</FallbackProvider>

// Wrapp every page using FallbackPageWrapper 
import { FallbackPageWrapper } from "react-current-page-fallback";

<FallbackPageWrapper>
  your page-1 here...
</FallbackPageWrapper>


<FallbackPageWrapper>
  your page-2 here...
</FallbackPageWrapper>

...

📂 Code Example

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container); // createRoot(container!) if you use TypeScript

root.render(<><App/></>);

App.js

react-router-dom V6

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { FallbackProvider } from "react-current-page-fallback";

const Home = React.lazy(() => import("./pages/Home"));
const About = React.lazy(() => import("./pages/About"));
const Contact = React.lazy(() => import("./pages/Contact"));

// react-router-dom V6
const App = () => {
  return (
    <Router>
      <div>
        <FallbackProvider>
          <Routes>
            <Route path="/about" element={ <About />} />
            <Route path="/contact" element={ <Contact />} />
            <Route path="/" element={ <Home />} />
          </Routes>
        </FallbackProvider>
      </div>
    </Router>
  );
};
export default App;

App.js

react-router-dom V5

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { FallbackProvider } from "react-current-page-fallback";

// react-router-dom V5
const App = () => {
  return (
    <Router>
      <div>
        <FallbackProvider>
          <Switch>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/contact">
              <Contact />
            </Route>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </FallbackProvider>
      </div>
    </Router>
  );
};
export default App;

Nav.js

import React from 'react';
import { Link } from 'react-router-dom';

export const Nav = () => {
  return (
    <>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link> 
        <Link to="/contact">Contact</Link>
    </>
  );
};

export default Nav;

Home.js

import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";

const Home  = () => {
  return (
    <FallbackPageWrapper>
      <div>
        <Nav />
        <h1>Home</h1>
      </div>
    </FallbackPageWrapper>
  );
};

export default Home;

About.js

import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";

const About  = () => {
  return (
    <FallbackPageWrapper>
      <div>
        <Nav />
        <h1>About</h1>
      </div>
    </FallbackPageWrapper>
  );
};

export default About;

Contact.js

import React from 'react';
import { Nav } from '../components/Nav';
import { FallbackPageWrapper } from "react-current-page-fallback";

const Contact  = () => {
  return (
    <FallbackPageWrapper>
      <div>
        <Nav />
        <h1>Contact</h1>
      </div>
    </FallbackPageWrapper>
  );
};

export default Contact;

Preview

Test this using Slow 3G for better results

Example

You can run the example by cloning the repo:

git clone https://github.com/asifvora/react-current-page-fallback.git
yarn
yarn start

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

👤 Asif Vora

Github: @asifvora
LinkedIn: @asif-vora
Twitter: @007_dark_shadow
Instagram: @007_dark_shadow

🍰 Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.
Please read CONTRIBUTING for details.

🙏 Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️