feat: add loading to index pages

AirWalk-Digital · Nov 19, 2023 · ee49a47 · ee49a47
1 parent 0ac9eee
commit ee49a47
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 7 deletions.
diff --git a/pages/customers/index.jsx b/pages/customers/index.jsx
@@ -6,8 +6,14 @@ import { ListMenu } from '@/components/dashboard/Menus'
 import { usePageMenu } from "@/lib/hooks";
 
 
-export default function Page({ tiles, menuStructure: initialMenuStructure, collection }) {
+export default function Page({ tiles, menuStructure: initialMenuStructure, collection, loading }) {
 
+
+  if (loading) {
+    return (
+      <IndexView menuStructure={null} title="Customers" tiles={null} menuComponent={ListMenu} loading={true}/>
+    )
+  }
   const { menuStructure  } = usePageMenu(initialMenuStructure, collection);
 
   return (

diff --git a/pages/products/index.jsx b/pages/products/index.jsx
@@ -6,7 +6,14 @@ import { HeaderMinimalMenu } from '@/components/dashboard/Menus'
 import { usePageMenu } from "@/lib/hooks";
 
 
-export default function Page({ tiles, menuStructure: initialMenuStructure, collection }) {
+export default function Page({ tiles, menuStructure: initialMenuStructure, collection , loading}) {
+
+
+  if (loading) {
+    return (
+      <IndexView menuStructure={null} title="Products" tiles={null} menuComponent={HeaderMinimalMenu} loading={true}/>
+    )
+  }
 
   const { menuStructure  } = usePageMenu(initialMenuStructure, collection);
 

diff --git a/pages/providers/index.jsx b/pages/providers/index.jsx
@@ -6,8 +6,15 @@ import { HeaderMinimalMenu } from '@/components/dashboard/Menus'
 import { usePageMenu } from "@/lib/hooks";
 
 
-export default function Page({ tiles, menuStructure: initialMenuStructure, collection }) {
+export default function Page({ tiles, menuStructure: initialMenuStructure, collection, loading }) {
 
+
+
+  if (loading) {
+    return (
+      <IndexView menuStructure={null} title="Providers and Services" tiles={null} menuComponent={HeaderMinimalMenu} loading={true}/>
+    )
+  }
   const { menuStructure  } = usePageMenu(initialMenuStructure, collection);
 
   return (

diff --git a/pages/services/[...service].jsx b/pages/services/[...service].jsx
@@ -15,7 +15,8 @@ export default function Page({
   menuStructure: initialMenuStructure,
   collection,
   controls,
-  context: initialContext
+  context: initialContext,
+  loading
 }) {
   const {
     pageContent,
@@ -44,12 +45,13 @@ export default function Page({
         <ServicesHeader {...props} extraData={controls} />
       )}
       sideComponent={(props) => <ControlsMenu {...props} controls={controls} />}
+      loading={loading}
     />
   );
 }
 
 export async function getServerSideProps(context) {
-  console.log(context.params.service)
+  // console.log(context.params.service)
 
   const file = "services/" + context.params.service.join("/");
   let pageContent = "";

diff --git a/pages/services/index.jsx b/pages/services/index.jsx
@@ -6,8 +6,13 @@ import { HeaderMinimalMenu } from '@/components/dashboard/Menus'
 import { usePageMenu } from "@/lib/hooks";
 
 
-export default function Page({ tiles, menuStructure: initialMenuStructure, collection }) {
+export default function Page({ tiles, menuStructure: initialMenuStructure, collection, loading }) {
 
+  if (loading) {
+    return (
+      <IndexView menuStructure={null} title="Providers and Services" tiles={null} menuComponent={HeaderMinimalMenu} loading={true}/>
+    )
+  }
   const { menuStructure  } = usePageMenu(initialMenuStructure, collection);
 
   return (

diff --git a/pages/solutions/index.jsx b/pages/solutions/index.jsx
@@ -27,6 +27,15 @@ export default function Page({ tiles, menuStructure: initialMenuStructure, colle
 export async function getServerSideProps(context) {
 
   const tiles = await getFrontMatter(siteConfig.content.solutions);
+
+
+  const filteredTiles = tiles.filter(tile => {
+    const parts = tile.file.split('/'); // Split the file path by '/'
+    const fileName = parts[parts.length - 1]; // Get the last part (file name)
+    // Check if the path has exactly 3 parts and the file name is 'index.md' or 'index.mdx'
+    return parts.length === 3 && (fileName === '_index.md' || fileName === '_index.mdx');
+  });
+
   const menuPromise = getMenuStructure(
     siteConfig,
     siteConfig.content.solutions
@@ -36,7 +45,7 @@ export async function getServerSideProps(context) {
   return {
     props: {
       menuStructure: menuStructure,
-      tiles: tiles,
+      tiles: filteredTiles,
       collection: siteConfig.content.solutions,
     },
   };