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 ⭐️

Feature Request: Customizations for Loading Bar and Initial Loading Screen

Description

I am currently using the react-current-page-fallback library in my React project to handle page transitions and loading states. It’s been a great help, but I’ve noticed that there are a couple of enhancements that could significantly improve the developer and user experience.

Feature Request

Customizable Loading Bar: I would like to request the ability to customize the loading bar’s appearance, specifically its color. This would allow developers to maintain consistency with their application’s branding and overall design.

Potential Solution: Introduce new props in the FallbackProvider or FallbackPageWrapper components that allow developers to specify the color of the loading bar.

Example:

   <FallbackProvider loadingBarColor="#3498db">
     {/* ... */}
   </FallbackProvider>

Initial Loading Screen: Currently, the library displays a yellow loading bar during initial page load. I would like to propose an enhancement where developers can introduce a custom initial loading screen instead of the default loading bar.

Potential Solution: Provide an additional prop in the FallbackProvider or FallbackPageWrapper components that allows developers to pass in a custom React component to be displayed during the initial load.

Example:

<FallbackProvider initialLoadingScreen={<CustomInitialLoadingScreen />}>
  {/* ... */}
</FallbackProvider>

asifvora / react-current-page-fallback Goto Github PK