Merge pull request #2362 from Civolilah/bugfix/auto-page-scrolling

[Bugfix] Fixing Issue With Scrolling Client And Vendor Show Page

src/components/ScrollToTop.tsx

@@ -14,7 +14,24 @@ import { useLocation } from 'react-router';
 export function ScrollToTop(props: any) {
   const location = useLocation();
 
+  const pathSegments = location.pathname.split('/');
+  const id = pathSegments?.[2] || '';
+
+  const isClientShowPage =
+    id &&
+    location.pathname.startsWith(`/clients/${id}`) &&
+    !location.pathname.endsWith('/edit');
+
+  const isVendorShowPage =
+    id &&
+    location.pathname.startsWith(`/vendors/${id}`) &&
+    !location.pathname.endsWith('/edit');
+
   useEffect(() => {
+    if (isClientShowPage || isVendorShowPage) {
+      return;
+    }
+
     window.scrollTo(0, 0);
   }, [location]);
 

src/components/TabLoader.tsx

@@ -0,0 +1,19 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { Spinner } from '$app/components/Spinner';
+
+export function TabLoader() {
+  return (
+    <div className="py-4">
+      <Spinner />
+    </div>
+  );
+}

src/pages/clients/routes.tsx

@@ -13,7 +13,8 @@ import { assigned } from '$app/common/guards/guards/assigned';
 import { or } from '$app/common/guards/guards/or';
 import { permission } from '$app/common/guards/guards/permission';
 import { Route } from 'react-router-dom';
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
+import { TabLoader } from '$app/components/TabLoader';
 
 const Clients = lazy(() => import('$app/pages/clients/index/Clients'));
 const Import = lazy(() => import('$app/pages/clients/import/Import'));
@@ -97,17 +98,94 @@ export const clientRoutes = (
         />
       }
     >
-      <Route path="" element={<Invoices />} />
-      <Route path="quotes" element={<Quotes />} />
-      <Route path="payments" element={<Payments />} />
-      <Route path="recurring_invoices" element={<RecurringInvoices />} />
-      <Route path="credits" element={<Credits />} />
-      <Route path="projects" element={<Projects />} />
-      <Route path="tasks" element={<Tasks />} />
-      <Route path="expenses" element={<Expenses />} />
-      <Route path="recurring_expenses" element={<RecurringExpenses />} />
-      <Route path="activities" element={<Activities />} />
-      <Route path="documents" element={<Documents />} />
+      <Route
+        path=""
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Invoices />
+          </Suspense>
+        }
+      />
+      <Route
+        path="quotes"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Quotes />
+          </Suspense>
+        }
+      />
+      <Route
+        path="payments"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Payments />
+          </Suspense>
+        }
+      />
+      <Route
+        path="recurring_invoices"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <RecurringInvoices />
+          </Suspense>
+        }
+      />
+      <Route
+        path="credits"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Credits />
+          </Suspense>
+        }
+      />
+      <Route
+        path="projects"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Projects />
+          </Suspense>
+        }
+      />
+      <Route
+        path="tasks"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Tasks />
+          </Suspense>
+        }
+      />
+      <Route
+        path="expenses"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Expenses />
+          </Suspense>
+        }
+      />
+      <Route
+        path="recurring_expenses"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <RecurringExpenses />
+          </Suspense>
+        }
+      />
+      <Route
+        path="activities"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Activities />
+          </Suspense>
+        }
+      />
+      <Route
+        path="documents"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Documents />
+          </Suspense>
+        }
+      />
     </Route>
     <Route
       path=":id/statement"

src/pages/vendors/routes.tsx

@@ -15,7 +15,8 @@ import { enabled } from '$app/common/guards/guards/enabled';
 import { ModuleBitmask } from '$app/pages/settings/account-management/component';
 import { or } from '$app/common/guards/guards/or';
 import { assigned } from '$app/common/guards/guards/assigned';
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
+import { TabLoader } from '$app/components/TabLoader';
 
 const Vendors = lazy(() => import('$app/pages/vendors/index/Vendors'));
 const Import = lazy(() => import('$app/pages/vendors/import/Import'));
@@ -80,12 +81,54 @@ export const vendorRoutes = (
         />
       }
     >
-      <Route path="" element={<PurchaseOrders />} />
-      <Route path="purchase_orders" element={<PurchaseOrders />} />
-      <Route path="expenses" element={<Expenses />} />
-      <Route path="recurring_expenses" element={<RecurringExpenses />} />
-      <Route path="activities" element={<Activities />} />
-      <Route path="documents" element={<Documents />} />
+      <Route
+        path=""
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <PurchaseOrders />
+          </Suspense>
+        }
+      />
+      <Route
+        path="purchase_orders"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <PurchaseOrders />
+          </Suspense>
+        }
+      />
+      <Route
+        path="expenses"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Expenses />
+          </Suspense>
+        }
+      />
+      <Route
+        path="recurring_expenses"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <RecurringExpenses />
+          </Suspense>
+        }
+      />
+      <Route
+        path="activities"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Activities />
+          </Suspense>
+        }
+      />
+      <Route
+        path="documents"
+        element={
+          <Suspense fallback={<TabLoader />}>
+            <Documents />
+          </Suspense>
+        }
+      />
     </Route>
     <Route
       path=":id/edit"