Added isLoading props to the Switch component

Author: Victor Trusov

index.d.ts

@@ -8,7 +8,8 @@ declare module "react-router-loading" {
         & OmitNative<T, keyof SwitchProps>
         & {
             loadingScreen?: React.Component,
-            maxLoadingTime?: number
+            maxLoadingTime?: number,
+            isLoading?: boolean
         },
         any
     > { }

src/LoadingMiddleware.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { LoadingContext, LoadingGetterContext } from './LoadingContext';
 import { topbar } from '.';
 
-const LoadingMiddleware = ({ children }) => {
-    const [loading, setLoading] = useState(false);
+const LoadingMiddleware = ({ children, isLoading = false }) => {
+    const [loading, setLoading] = useState(isLoading);
+    const isFirstRender = useRef(true);
 
     const start = useCallback(() => {
         topbar.show();
@@ -20,6 +21,18 @@ const LoadingMiddleware = ({ children }) => {
         topbar.show();
     }, []);
 
+    useEffect(() => {
+        if (!isFirstRender.current) {
+            // didn't use start() to skip unnecessary topbar triggering
+            if (isLoading)
+                setLoading(true);
+            else
+                done();
+        } else {
+            isFirstRender.current = false;
+        }
+    }, [isLoading]);
+
     const loadingProvider = useMemo(
         () => <LoadingContext.Provider value={{ start, done, restart }}>
             {children}

src/LoadingSwitch.jsx

@@ -113,8 +113,8 @@ const RouteComponent = ({ context, allRoutes, hidden }) =>
     </div>;
 
 // combine topbar and switch
-const LoadingSwitch = ({ children, loadingScreen, maxLoadingTime }) =>
-    <LoadingMiddleware>
+const LoadingSwitch = ({ children, loadingScreen, maxLoadingTime, isLoading }) =>
+    <LoadingMiddleware isLoading={isLoading}>
         <Switcher loadingScreen={loadingScreen} maxLoadingTime={maxLoadingTime}>
             {children}
         </Switcher>