fix (ui): inconsistent loading state, layout misalignment, and missing animation

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "seamless-protocol-v2-app",

src/components/ui/table.tsx

@@ -167,8 +167,8 @@ function TablePagination({
       <div className="px-6 py-4 flex items-center justify-between">
         <div className="flex items-center space-x-2 text-sm text-muted-foreground">
           <span>
-            Showing {startItem} to {endItem} of {totalItems} results
-          </span>
+            {totalItems > 0 ? `Showing ${startItem} to ${endItem} of ${totalItems} results` : 'No results found'}
+          </span> 
         </div>
 
         {/* Only show navigation when there are multiple pages */}

src/features/leverage-tokens/components/leverage-token-table/LeverageTokenTable.tsx

@@ -358,20 +358,21 @@ export function LeverageTokenTable({
                 </TableHead>
               </TableRow>
             </TableHeader>
-            <TableBody>
-              {currentItems.length === 0 ? (
-                <TableEmpty colSpan={6} />
-              ) : (
-                currentItems.map((token, index) => {
+              <TableBody>
+                {currentItems.length === 0 ? (
+                  <TableEmpty colSpan={6} />
+                ) : (
+                  currentItems.map((token, index) => {
                   const tokenApyData = apyDataMap?.get(token.address)
                   const tokenApyError = apyError || (!apyLoading && !apyDataMap?.has(token.address))
 
+
                   return (
                     <motion.tr
                       key={token.address}
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.3, delay: index * 0.05 }}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ duration: 0.6, delay: index * 0.05 }}
                       className="cursor-pointer border-[var(--divider-line)] transition-colors hover:bg-accent"
                       onClick={() => onTokenClick?.(token)}
                     >

src/routes/leverage-tokens.$chainId.$id.tsx

@@ -374,11 +374,15 @@ export const Route = createFileRoute('/leverage-tokens/$chainId/$id')({
                 <div className="flex items-center space-x-1">
                   <Badge
                     variant={
-                      apyData?.totalAPY !== undefined && apyData.totalAPY < 0 ? 'error' : 'success'
+                      isApyError || (apyData?.totalAPY !== undefined && apyData.totalAPY < 0)
+                        ? 'error'
+                        : 'success'
                     }
                     className="text-sm"
                   >
-                    {apyData?.totalAPY ? (
+                    {isApyError ? (
+                      'No APY'
+                    ) : apyData?.totalAPY !== undefined ? (
                       `${formatAPY(apyData.totalAPY, 2)} APY`
                     ) : (
                       <Skeleton className="h-4 w-20" />
@@ -466,12 +470,14 @@ export const Route = createFileRoute('/leverage-tokens/$chainId/$id')({
                 <div className="flex items-center space-x-1">
                   <Badge
                     className={
-                      apyData?.totalAPY !== undefined && apyData.totalAPY < 0
+                      isApyError || (apyData?.totalAPY !== undefined && apyData.totalAPY < 0)
                         ? 'border-[color-mix(in_srgb,var(--state-error-text)_25%,transparent)] bg-[var(--state-error-bg)] text-[var(--state-error-text)]'
                         : 'border-[color-mix(in_srgb,var(--state-success-text)_25%,transparent)] bg-[var(--state-success-bg)] text-[var(--state-success-text)]'
                     }
                   >
-                    {apyData?.totalAPY ? (
+                    {isApyError ? (
+                      'No APY'
+                    ) : apyData?.totalAPY !== undefined ? (
                       `${formatAPY(apyData.totalAPY, 2)} APY`
                     ) : (
                       <Skeleton className="h-4 w-20" />

src/routes/vaults.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { motion } from 'framer-motion'
 import { Award, ExternalLink } from 'lucide-react'
 import { useEffect } from 'react'
 import { PageContainer } from '@/components/PageContainer'
@@ -26,7 +27,12 @@ function VaultsPage() {
     <PageContainer padded={false} className="py-2 xs:py-3 sm:py-4 lg:py-8">
       <div className="space-y-8 max-w-4xl mx-auto pb-8">
         {/* Hero */}
-        <div className="text-center space-y-6">
+        <motion.div
+          className="text-center space-y-6"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
           <div className="space-y-4">
             <div className="space-y-2">
               <h1 className="text-3xl sm:text-4xl font-bold text-foreground">Seamless Vaults</h1>
@@ -39,12 +45,23 @@ function VaultsPage() {
               with Morpho. Earn competitive returns with battle-tested security.
             </p>
           </div>
-        </div>
+        </motion.div>
 
-        <VaultStatCards />
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          <VaultStatCards />
+        </motion.div>
 
         {/* CTA Card */}
-        <Card className="text-card-foreground flex flex-col gap-6 rounded-xl bg-gradient-to-br from-purple-500/10 via-slate-900/80 to-cyan-500/10 border border-purple-500/20 hover:border-purple-500/30 transition-all duration-300">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <Card className="text-card-foreground flex flex-col gap-6 rounded-xl bg-gradient-to-br from-purple-500/10 via-slate-900/80 to-cyan-500/10 border border-purple-500/20 hover:border-purple-500/30 transition-all duration-300">
           <CardContent className="p-8 text-center space-y-8">
             <div className="space-y-6">
               <h2 className="text-2xl sm:text-3xl font-semibold text-foreground">
@@ -105,7 +122,8 @@ function VaultsPage() {
               </Button>
             </div>
           </CardContent>
-        </Card>
+          </Card>
+        </motion.div>
       </div>
     </PageContainer>
   )