[#1150] fix(UI): Fix details comment error and improve components che…

…ck (#1334)

### What changes were proposed in this pull request?

The error occurred due to the failure to locate the correct variable
object and its properties.

Resolve: use an empty string as a substitute.

Extra:
1. Initialize and reset the tree list when the metalake page is loaded.
2. Improve rendering of components check.

### Why are the changes needed?

Fix: #1150 

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

N/A

Co-authored-by: CHEYNE <[email protected]>

web/app/metalakes/DetailsView.js

@@ -36,7 +36,7 @@ const DetailsView = props => {
           <Typography variant='body2' sx={{ mb: 2 }}>
             Comment
           </Typography>
-          <Typography sx={{ fontWeight: 500 }}>{activatedItem.comment}</Typography>
+          <Typography sx={{ fontWeight: 500 }}>{activatedItem?.comment || ''}</Typography>
         </Grid>
 
         <Grid item xs={12} md={6} sx={{ mb: [0, 5] }}>

web/app/metalakes/MetalakeView.js

@@ -35,9 +35,7 @@ const MetalakeView = props => {
   useEffect(() => {
     const { metalake, catalog, schema, table } = routeParams
 
-    if (store.metalakeTree.length === 0) {
-      dispatch(initMetalakeTree({ metalake, catalog, schema, table }))
-    }
+    dispatch(initMetalakeTree({ metalake, catalog, schema, table }))
 
     switch (page) {
       case 'metalakes':

web/lib/layout/Layout.js

@@ -5,17 +5,16 @@
 
 'use client'
 
-import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
 
-import { Box, Fab, CircularProgress } from '@mui/material'
+import { Box, Fab } from '@mui/material'
 
 import Icon from '@/components/Icon'
 
 import AppBar from './AppBar'
 import Footer from './Footer'
 import MainContent from './MainContent'
 import ScrollToTop from './ScrollToTop'
-import { NavigationEvents } from './navigation-events'
 
 const Layout = ({ children, scrollToTop }) => {
   return (
@@ -43,4 +42,5 @@ const Layout = ({ children, scrollToTop }) => {
   )
 }
 
-export default Layout
+// ** use dynamic export instead of export default Layout
+export default dynamic(() => Promise.resolve(Layout), { ssr: false })

web/lib/provider/client.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2023 Datastrato Pvt Ltd.
+ * This software is licensed under the Apache License version 2.
+ */
+
+import { useEffect, useState, Fragment } from 'react'
+
+const ClientOnly = ({ children, ...delegated }) => {
+  const [hasMounted, setHasMounted] = useState(false)
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) return null
+
+  return <Fragment {...delegated}>{children}</Fragment>
+}
+
+export default ClientOnly

web/lib/provider/index.js

@@ -5,20 +5,23 @@
 
 'use client'
 
+import ClientOnly from './client'
 import AuthProvider from './session'
 import StoreProvider from './store'
 import EmotionProvider from './emotion'
 import ThemeProvider from './theme'
 
 const Provider = ({ children }) => {
   return (
-    <StoreProvider>
-      <EmotionProvider>
-        <AuthProvider>
-          <ThemeProvider>{children}</ThemeProvider>
-        </AuthProvider>
-      </EmotionProvider>
-    </StoreProvider>
+    <ClientOnly>
+      <StoreProvider>
+        <EmotionProvider>
+          <AuthProvider>
+            <ThemeProvider>{children}</ThemeProvider>
+          </AuthProvider>
+        </EmotionProvider>
+      </StoreProvider>
+    </ClientOnly>
   )
 }