feat(UI): add loading logic

moon/apps/web/components/CodeView/CodeTable.tsx

@@ -20,7 +20,7 @@ export interface DataType {
   date: number
 }
 
-const CodeTable = ({ directory, readmeContent }: any) => {
+const CodeTable = ({ directory, readmeContent, loading }: any) => {
   const router = useRouter()
   const pathname = usePathname()
   let real_path = pathname?.replace('/tree', '')
@@ -94,7 +94,14 @@ const CodeTable = ({ directory, readmeContent }: any) => {
 
   return (
     <div>
-      <RTable columns={columns ?? []} datasource={directory} size='3' align='center' onClick={handleRowClick} />
+      <RTable
+        columns={columns ?? []}
+        datasource={directory}
+        size='3'
+        align='center'
+        onClick={handleRowClick}
+        loading={loading}
+      />
 
       {readmeContent && (
         <div className={styles.markdownContent}>

moon/apps/web/components/CodeView/Table/index.tsx

@@ -1,4 +1,4 @@
-import { Table } from '@radix-ui/themes'
+import { Spinner, Table } from '@radix-ui/themes'
 
 import { columnsType, DirectoryType } from './type'
 
@@ -8,53 +8,55 @@ const table = <T extends DirectoryType>({
   size,
   align,
   justify,
-  onClick
+  onClick,
+  loading = false
 }: {
   columns: columnsType<T>[]
   datasource: T[]
   size?: '1' | '2' | '3' | undefined
   align?: 'center' | 'start' | 'end' | undefined
   justify?: 'center' | 'start' | 'end' | undefined
   onClick?: (record: T) => void
+  loading?: boolean
 }) => {
   return (
     <>
-      <Table.Root size={size}>
-        <Table.Header>
-          <Table.Row align={align}>
-            {columns.map((c) => (
-              <>
-                <Table.ColumnHeaderCell>{c.title}</Table.ColumnHeaderCell>
-              </>
-            ))}
-          </Table.Row>
-        </Table.Header>
+      <Spinner loading={loading}>
+        <Table.Root size={size}>
+          <Table.Header>
+            <Table.Row align={align}>
+              {columns.map((c) => (
+                <Table.ColumnHeaderCell key={c.title}>{c.title}</Table.ColumnHeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
 
-        <Table.Body>
-          {datasource.map((d) => {
-            if (d) {
-              return (
-                <Table.Row className='hover:bg-gray-100' key={d.oid}>
-                  {columns.map((c, index) => (
-                    <Table.Cell
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onClick?.(d)
-                      }}
-                      justify={justify}
-                      key={c.key}
-                    >
-                      {c.render ? c.render(c.dataIndex[0], d, index) : null}
-                    </Table.Cell>
-                  ))}
-                </Table.Row>
-              )
-            } else {
-              return null
-            }
-          })}
-        </Table.Body>
-      </Table.Root>
+          <Table.Body>
+            {datasource.map((d) => {
+              if (d) {
+                return (
+                  <Table.Row className='hover:bg-gray-100' key={d.oid}>
+                    {columns.map((c, index) => (
+                      <Table.Cell
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onClick?.(d)
+                        }}
+                        justify={justify}
+                        key={c.key + d.oid}
+                      >
+                        {c.render ? c.render(c.dataIndex[0], d, index) : null}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                )
+              } else {
+                return null
+              }
+            })}
+          </Table.Body>
+        </Table.Root>
+      </Spinner>
     </>
   )
 }

moon/apps/web/components/CodeView/TableWithLoading/index.tsx

@@ -0,0 +1,19 @@
+import { LoadingSpinner } from '@gitmono/ui'
+
+import CodeTable from '../CodeTable'
+
+const SpinnerTable = ({ isLoading, datasource, content }: any) => {
+  return (
+    <div className='relative mt-3 h-screen p-3.5'>
+      {isLoading ? (
+        <div className='align-center container absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center'>
+          <LoadingSpinner />
+        </div>
+      ) : (
+        <CodeTable directory={datasource} loading={isLoading} readmeContent={content} />
+      )}
+    </div>
+  )
+}
+
+export default SpinnerTable

moon/apps/web/components/CodeView/index.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
+
 import { CommonResultVecTreeCommitItem } from '@gitmono/types/generated'
 
 import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo'
 
-import CodeTable from './CodeTable'
+import SpinnerTable from './TableWithLoading'
 
 export default function CodeView() {
   const { data: TreeCommitInfo } = useGetTreeCommitInfo('/')
@@ -31,11 +32,7 @@ export default function CodeView() {
     fetchData()
   }, [fetchData])
 
-  return (
-    <div className='mt-3 p-3.5'>
-      <CodeTable directory={directory} readmeContent={readmeContent} />
-    </div>
-  )
+  return <SpinnerTable isLoading={!TreeCommitInfo} datasource={directory} content={readmeContent} />
 }
 
 async function getReadmeContent(pathname: string, directory: any) {

moon/apps/web/pages/[org]/code/tree/[...path]/index.tsx

@@ -1,11 +1,13 @@
 'use client'
 
 import React, { useEffect, useMemo, useState } from 'react'
-import { CommonResultVecTreeCommitItem } from '@gitmono/types/generated'
 import { Theme } from '@radix-ui/themes'
 import { Flex, Layout } from 'antd'
 import { useParams } from 'next/navigation'
 
+import { CommonResultVecTreeCommitItem } from '@gitmono/types/generated'
+import { LoadingSpinner } from '@gitmono/ui'
+
 import CodeTable from '@/components/CodeView/CodeTable'
 import Bread from '@/components/CodeView/TreeView/BreadCrumb'
 import CloneTabs from '@/components/CodeView/TreeView/CloneTabs'
@@ -71,25 +73,30 @@ function TreeDetailPage() {
   }
 
   return (
-    <div className='m-2 overflow-hidden'>
-      <Flex gap="middle" wrap>
+    <div className='relative m-2 h-screen overflow-hidden'>
+      {!TreeCommitInfo ? (
+        <div className='align-center container absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 justify-center'>
+          <LoadingSpinner />
+        </div>
+      ) : (
+        <Flex gap='middle' wrap>
           <Layout style={breadStyle}>
-              <Bread path={path} />
-              {
-                  canClone?.data &&
-                  <Flex justify={'flex-end'} >
-                      <CloneTabs endpoint={endpoint} />
-                  </Flex>
-              }
+            <Bread path={path} />
+            {canClone?.data && (
+              <Flex justify={'flex-end'}>
+                <CloneTabs endpoint={endpoint} />
+              </Flex>
+            )}
           </Layout>
-            {/* tree */}
+          {/* tree */}
           <Layout style={treeStyle}>
-              <RepoTree directory={directory} />
+            <RepoTree directory={directory} />
           </Layout>
           <Layout style={codeStyle}>
-              <CodeTable directory={directory} readmeContent={readmeContent} />
+            <CodeTable directory={directory} loading={!TreeCommitInfo} readmeContent={readmeContent} />
           </Layout>
-      </Flex>
+        </Flex>
+      )}
     </div>
   )
 }