diff --git a/app/dashboard/orders/[id]/loading.tsx b/app/dashboard/orders/[id]/loading.tsx
index ebf4d80..a04f728 100644
--- a/app/dashboard/orders/[id]/loading.tsx
+++ b/app/dashboard/orders/[id]/loading.tsx
@@ -1,103 +1,86 @@
-import Layout from "@/components/layout/layout";
+"use client"
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import Layout from "@/components/layout/layout";
 import { Loader2 } from "lucide-react";
 
-export default function OrderDetailLoading() {
+export default function OrderDetailsLoading() {
   return (
     <Layout>
-      <div className="space-y-6 animate-in fade-in duration-300">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-9 w-9 rounded-full" />
-            <Skeleton className="h-8 w-48" />
+      <div className="space-y-6 animate-in fade-in duration-500">
+        {/* Header skeleton */}
+        <div className="flex justify-between items-center">
+          <div>
+            <Skeleton className="h-8 w-48 mb-2" />
+            <Skeleton className="h-4 w-72" />
           </div>
-          <Skeleton className="h-9 w-24" />
+          <Skeleton className="h-10 w-32" />
         </div>
 
-        <div className="grid gap-6 md:grid-cols-2">
-          {/* Order Info Card */}
-          <Card className="relative overflow-hidden md:col-span-1">
-            <CardHeader>
+        {/* Order details skeleton */}
+        <Card className="border-border/40 shadow-sm">
+          <CardHeader>
+            <div className="flex justify-between items-center">
               <CardTitle>
-                <Skeleton className="h-6 w-36" />
+                <Skeleton className="h-6 w-32" />
               </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {[...Array(6)].map((_, i) => (
-                <div key={i} className="flex justify-between">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-4 w-32" />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-
-          {/* Customer Info Card */}
-          <Card className="relative overflow-hidden md:col-span-1">
-            <CardHeader>
-              <CardTitle>
-                <Skeleton className="h-6 w-36" />
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {[...Array(4)].map((_, i) => (
-                <div key={i} className="flex justify-between">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-4 w-32" />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-
-          {/* Order Items Card */}
-          <Card className="relative overflow-hidden md:col-span-2">
-            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
-              <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm p-6 rounded-lg">
-                <Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />
-                <p className="text-lg font-medium">Loading order details...</p>
-              </div>
+              <Skeleton className="h-6 w-24" />
             </div>
-            
-            <CardHeader>
-              <CardTitle>
-                <Skeleton className="h-6 w-36" />
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="opacity-30">
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-6">
+              {/* Order status and tracking */}
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-8 w-8 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-48" />
+                </div>
+              </div>
+
+              {/* Order items */}
               <div className="space-y-4">
                 {[...Array(3)].map((_, i) => (
-                  <div key={i} className="flex items-center gap-4 p-3 border rounded-lg">
-                    <Skeleton className="h-14 w-14 rounded-md" />
+                  <div key={i} className="flex items-center gap-4">
+                    <Skeleton className="h-16 w-16 rounded-md" />
                     <div className="space-y-2 flex-1">
-                      <Skeleton className="h-5 w-full max-w-[200px]" />
+                      <Skeleton className="h-4 w-48" />
                       <Skeleton className="h-4 w-32" />
                     </div>
                     <div className="text-right">
-                      <Skeleton className="h-5 w-20 ml-auto" />
-                      <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                      <Skeleton className="h-4 w-16" />
+                      <Skeleton className="h-4 w-20" />
                     </div>
                   </div>
                 ))}
               </div>
-              
-              <div className="border-t mt-6 pt-4">
-                <div className="space-y-2">
-                  {[...Array(3)].map((_, i) => (
-                    <div key={i} className="flex justify-between">
-                      <Skeleton className="h-4 w-28" />
-                      <Skeleton className="h-4 w-20" />
-                    </div>
-                  ))}
-                  <div className="flex justify-between pt-2 border-t mt-2">
-                    <Skeleton className="h-6 w-32" />
-                    <Skeleton className="h-6 w-24" />
-                  </div>
+
+              {/* Order summary */}
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+                <div className="flex justify-between">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="flex justify-between font-bold">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-24" />
                 </div>
               </div>
-            </CardContent>
-          </Card>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Loading overlay */}
+        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-[2px] pointer-events-none">
+          <div className="flex flex-col items-center justify-center p-6 rounded-lg">
+            <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+            <p className="text-lg font-medium">Loading order details...</p>
+          </div>
         </div>
       </div>
     </Layout>