[Portal] improve UI design while no-data status (#1693)

* feat: improve loading UI on assets page

* feat: improve UI on profile-info page

* feat: update the loading spinner UI on assets page

* feat: improve the loading UI

rooch-portal-v1/src/components/profile-info.tsx

@@ -26,7 +26,11 @@ export const ProfileInfo = () => {
             Rooch Network
           </h3>
           <div className="leading-none text-muted-foreground flex items-center justify-start font-normal text-xs sm:text-sm">
-            <p>{formatAddress(account?.getRoochAddress())}</p>
+            {account ? (
+              <p>{formatAddress(account?.getRoochAddress())}</p>
+            ) : (
+              <p>Connect to wallet</p>
+            )}
             <Button
               variant="ghost"
               size="icon"

rooch-portal-v1/src/pages/assets/assets-details/tabs/coin/assets-coin.tsx

@@ -8,7 +8,7 @@ import {
   useTransferCoin,
 } from '@roochnetwork/rooch-sdk-kit'
 
-import { ArrowLeft } from 'lucide-react'
+import { AlertCircle, ArrowLeft } from 'lucide-react'
 import {
   Table,
   TableBody,
@@ -22,7 +22,6 @@ import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
-import { LoadingSpinner } from '@/components/loading-spinner.tsx'
 
 import CustomPagination from '@/components/custom-pagination.tsx'
 
@@ -138,9 +137,19 @@ export const AssetsCoin = () => {
 
   if (isLoading || isError) {
     return (
-      <div className="relative my-12">
-        <div className="absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-          {isLoading ? <LoadingSpinner /> : <div>Error loading data</div>}
+      <div className="relative p-40">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {isLoading ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <AlertCircle className="w-12 h-12 mb-4 text-red-500" />
+              <p className="text-xl text-red-500 font-semibold">Error loading data</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Something went wrong while fetching the data. Please try again later.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     )

rooch-portal-v1/src/pages/assets/assets-details/tabs/indexed-assets/components/indexed-assets-btc.tsx

@@ -9,8 +9,8 @@ import {
 import { NoData } from '@/components/no-data.tsx'
 import CustomPagination from '@/components/custom-pagination.tsx'
 
-import { LoadingSpinner } from '@/components/loading-spinner.tsx'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { AlertCircle } from 'lucide-react'
 
 // test address
 // const testAddress = ''
@@ -55,9 +55,19 @@ export const IndexedAssetsBTC = () => {
 
   if (isLoading || isError) {
     return (
-      <div className="relative my-12">
-        <div className="absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-          {isLoading ? <LoadingSpinner /> : <div>Error loading data</div>}
+      <div className="relative p-24">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {isLoading ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <AlertCircle className="w-12 h-12 mb-4 text-red-500" />
+              <p className="text-xl text-red-500 font-semibold">Error loading data</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Something went wrong while fetching the data. Please try again later.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     )

rooch-portal-v1/src/pages/assets/assets-details/tabs/indexed-assets/components/indexed-assets-ordi.tsx

@@ -8,9 +8,9 @@ import {
 import { NoData } from '@/components/no-data'
 import { Card, CardHeader } from '@/components/ui/card'
 import CustomPagination from '@/components/custom-pagination.tsx'
-import { LoadingSpinner } from '@/components/loading-spinner.tsx'
 
 import { hexToString } from '@/utils/format.ts'
+import { AlertCircle } from 'lucide-react'
 
 // test address
 // const testAddress = ''
@@ -56,9 +56,19 @@ export const IndexedAssetsOrdi = () => {
 
   if (isLoading || isError) {
     return (
-      <div className="relative my-12">
-        <div className="absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-          {isLoading ? <LoadingSpinner /> : <div>Error loading data</div>}
+      <div className="relative p-24">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {isLoading ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <AlertCircle className="w-12 h-12 mb-4 text-red-500" />
+              <p className="text-xl text-red-500 font-semibold">Error loading data</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Something went wrong while fetching the data. Please try again later.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     )

rooch-portal-v1/src/pages/assets/assets-details/tabs/nft/assets-nft.tsx

@@ -8,7 +8,7 @@ import {
   useTransferObject,
 } from '@roochnetwork/rooch-sdk-kit'
 
-import { ArrowLeft, Copy } from 'lucide-react'
+import { AlertCircle, ArrowLeft, Copy } from 'lucide-react'
 
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
@@ -174,9 +174,19 @@ export const AssetsNft = () => {
 
   if (isLoading || isError) {
     return (
-      <div className="relative my-12">
-        <div className="absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-          {isLoading ? <LoadingSpinner /> : <div>Error loading data</div>}
+      <div className="relative p-40">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {isLoading ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <AlertCircle className="w-12 h-12 mb-4 text-red-500" />
+              <p className="text-xl text-red-500 font-semibold">Error loading data</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Something went wrong while fetching the data. Please try again later.
+              </p>
+            </div>
+          )}
         </div>
       </div>
     )

rooch-portal-v1/src/pages/settings/components/connected-account.tsx

@@ -11,7 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { Copy, Check } from 'lucide-react'
+import { Copy, Check, CircleUser } from 'lucide-react'
 import { formatAddress } from '@/utils/format.ts'
 import { useCurrentAccount } from '@roochnetwork/rooch-sdk-kit'
 import toast from 'react-hot-toast'
@@ -41,6 +41,24 @@ export const ConnectedAccount = () => {
       })
   }
 
+  if (!account) {
+    return (
+      <div className="relative p-40">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {account ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <CircleUser className="w-12 h-12 mb-4 text-gray-500" />
+              <p className="text-xl text-zinc-500 font-semibold">Could not find your account</p>
+              <p className="text-sm text-muted-foreground mt-2">Please connect to wallet.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="rounded-lg border w-full">
       <Table>

rooch-portal-v1/src/pages/settings/components/manage-sessions.tsx

@@ -1,5 +1,6 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
+import { useState } from 'react'
 import {
   Table,
   TableBody,
@@ -10,13 +11,12 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Button } from '@/components/ui/button'
-import { useState } from 'react'
 import {
   useCurrentSession,
   useRemoveSession,
   useRoochClientQuery,
 } from '@roochnetwork/rooch-sdk-kit'
-import { Copy, ChevronDown, ChevronUp, Check } from 'lucide-react'
+import { Copy, ChevronDown, ChevronUp, Check, AlertCircle } from 'lucide-react'
 
 interface Session {
   authenticationKey: string
@@ -60,7 +60,11 @@ const copyToClipboard = async (text: string, setCopied: (value: boolean) => void
 export const ManageSessions: React.FC = () => {
   const sessionKey = useCurrentSession()
   const { mutateAsync: removeSession } = useRemoveSession()
-  const { data: sessionKeys } = useRoochClientQuery('querySessionKeys', {
+  const {
+    data: sessionKeys,
+    isLoading,
+    isError,
+  } = useRoochClientQuery('querySessionKeys', {
     address: sessionKey?.getAddress() || '',
   })
 
@@ -78,6 +82,40 @@ export const ManageSessions: React.FC = () => {
     maxInactiveInterval: session.maxInactiveInterval.toString(),
   })
 
+  if (isLoading || isError) {
+    return (
+      <div className="relative p-40">
+        <div className="absolute inset-0 bg-inherit bg-opacity-50 flex justify-center items-center">
+          {isLoading ? (
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
+            <div className="flex flex-col items-center justify-center text-center">
+              <AlertCircle className="w-12 h-12 mb-4 text-red-500" />
+              <p className="text-xl text-red-500 font-semibold">Error loading data</p>
+              <p className="text-sm text-muted-foreground mt-2">
+                Something went wrong while fetching the data. Please try again later.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  if (!sessionKeys?.data.length) {
+    return (
+      <div className="rounded-lg border w-full flex justify-center items-center h-full p-20">
+        <div className="flex flex-col items-center justify-center text-center text-xl text-muted-foreground">
+          <AlertCircle className="w-12 h-12 mb-4 text-blue-500" />
+          <p className="mb-2 font-semibold">No Data</p>
+          <p className="text-base text-gray-500">
+            No session keys found. Please check again later.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="rounded-lg border w-full">
       <Table>
@@ -93,7 +131,7 @@ export const ManageSessions: React.FC = () => {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {sessionKeys?.data.map((session: SessionInfoResult) => (
+          {sessionKeys.data.map((session: SessionInfoResult) => (
             <ExpandableRow
               key={session.authenticationKey}
               session={formatSession(session)}