feat(index.tsx): update GenomePageWrapper to use SummaryLoader compon…

…ent instead of Loader for better loading screen

The changes were made to refactor the loader components in the genome-page application to use the useRouter hook and Layout component for improved routing and page layout consistency. This enhances the user experience and makes the code more maintainable.

apps/genome-page/components/features/Phenotypes/PhenotypesLoader.tsx

@@ -1,16 +1,21 @@
-import { makeBy as AmakeBy } from "fp-ts/Array"
-import { Skeleton } from "@material-ui/lab"
-import Box from "@material-ui/core/Box"
+import { useRouter } from "next/router"
+import { Layout } from "components/layout/Layout"
+import { Loader } from "components/Loader"
 
 /**
- * Loading screen for Phenotypes page
+ * Loading screen for Summary page
  */
-const PhenotypesLoader = () => (
-  <Box mt="10px" data-testid="skeleton-loader">
-    {AmakeBy(12, (key) => (
-      <Skeleton height={50} key={key} animation="wave" />
-    ))}
-  </Box>
-)
+const PhenotypesLoader = () => {
+  const { query } = useRouter()
+  const geneId = query.id as string
+  return (
+    <Layout
+      gene={geneId}
+      title={`Phenotypes for ${geneId}`}
+      description={`Gene phenotypes for ${geneId}`}>
+      <Loader />
+    </Layout>
+  )
+}
 
 export { PhenotypesLoader }

apps/genome-page/components/features/References/ReferencesLoader.tsx

@@ -1,12 +1,21 @@
-import { Box, Skeleton } from "@mui/material"
+import { useRouter } from "next/router"
+import { Layout } from "components/layout/Layout"
+import { Loader } from "components/Loader"
 
-const ReferencesLoader = () => (
-  <Box mt="10px" data-testid="skeleton-loader">
-    {new Array(10).map((item, key) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Skeleton animation="wave" key={key} />
-    ))}
-  </Box>
-)
+/**
+ * Loading screen for Summary page
+ */
+const ReferencesLoader = () => {
+  const { query } = useRouter()
+  const geneId = query.id as string
+  return (
+    <Layout
+      gene={geneId}
+      title={`References for ${geneId}`}
+      description={`Gene references for ${geneId}`}>
+      <Loader />
+    </Layout>
+  )
+}
 
 export { ReferencesLoader }

apps/genome-page/components/features/Summary/SummaryLoader.tsx

@@ -1,15 +1,21 @@
-import { Box, Skeleton } from "@mui/material"
+import { useRouter } from "next/router"
+import { Layout } from "components/layout/Layout"
+import { Loader } from "components/Loader"
 
 /**
  * Loading screen for Summary page
  */
-const SummaryLoader = () => (
-  <Box mt="10px" data-testid="skeleton-loader">
-    {new Array(10).map((item, key) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Skeleton key={key} animation="wave" />
-    ))}
-  </Box>
-)
+const SummaryLoader = () => {
+  const { query } = useRouter()
+  const geneId = query.id as string
+  return (
+    <Layout
+      gene={geneId}
+      title={`GO Annotations for ${geneId}`}
+      description={`Gene Ontology Annotations for ${geneId}`}>
+      <Loader />
+    </Layout>
+  )
+}
 
 export { SummaryLoader }

apps/genome-page/pages/[id]/index.tsx

@@ -1,5 +1,5 @@
 import { SummaryContainer } from "components/features/Summary/SummaryContainer"
-import { Loader } from "components/Loader"
+import { SummaryLoader } from "components/features/Summary/SummaryLoader"
 import { GraphQLErrorPage } from "@dictybase/ui-common"
 import { useRouter } from "next/router"
 import { useGeneSummaryQuery } from "dicty-graphql-schema"
@@ -18,7 +18,7 @@ const GenomePageWrapper = () => {
     fetchPolicy: "cache-and-network",
   })
   return match(result)
-    .with({ loading: true }, () => <Loader />)
+    .with({ loading: true }, () => <SummaryLoader />)
     .with({ error: P.select(P.not(undefined)) }, (error) => (
       <GraphQLErrorPage error={error} />
     ))

apps/genome-page/pages/[id]/phenotypes.tsx

@@ -1,6 +1,6 @@
 import { PhenotypesContainer } from "components/features/Phenotypes/PhenotypesContainer"
+import { PhenotypesLoader } from "components/features/Phenotypes/PhenotypesLoader"
 import { GraphQLErrorPage } from "@dictybase/ui-common"
-import { Loader } from "components/Loader"
 import { useListStrainsWithGeneQuery } from "dicty-graphql-schema"
 import { useRouter } from "next/router"
 import { match, P } from "ts-pattern"
@@ -17,7 +17,7 @@ const PhenotypesPageWrapper = () => {
   })
 
   return match(result)
-    .with({ loading: true }, () => <Loader />)
+    .with({ loading: true }, () => <PhenotypesLoader />)
     .with({ error: P.select(P.not(undefined)) }, (error) => (
       <GraphQLErrorPage error={error} />
     ))