feat: improve skeleton design

Author: yunusemreozdemir

examples/agents-researcher/app/components/agent-ui.tsx

@@ -246,30 +246,70 @@ export const AgentUI = ({ session }: { session?: string }) => {
         <div className="mt-16 md:mt-16">
           {[1, 2, 3, 4].map((step) => (
             <div key={step} className="mb-1">
-              {step !== 1 ? (
+              {step === 1 && (
                 <div className="flex items-start gap-4">
                   <div className="flex flex-col gap-2 items-center">
                     <div className="h-8 w-8 rounded-full bg-gray-200"></div>
-                    <div className="h-16 bg-gray-200 rounded w-1"></div>
+                    <div className="h-32 bg-gray-200 rounded w-1"></div>
                   </div>
-                  <div className="mt-1 w-full">
+                  <div className="w-full mt-1">
                     <div className="h-5 bg-gray-200 rounded w-48 mb-2"></div>
-                    <div className="h-4 bg-gray-200 rounded w-full"></div>
+                    <div className="h-4 bg-gray-200 rounded w-full mb-4"></div>
+                    <div className="flex flex-row gap-2 items-center w-full">
+                      <div className="h-9 bg-gray-200 rounded w-full"></div>
+                      <div className="h-9 bg-gray-200 rounded w-24"></div>
+                    </div>
                   </div>
                 </div>
-              ) : (
+              )}
+              {step === 2 && (
                 <div className="flex items-start gap-4">
                   <div className="flex flex-col gap-2 items-center">
                     <div className="h-8 w-8 rounded-full bg-gray-200"></div>
-                    <div className="h-32 bg-gray-200 rounded w-1"></div>
+                    <div className="h-80 bg-gray-200 rounded w-1"></div>
                   </div>
-                  <div className="w-full mt-1">
+                  <div className="mt-1 w-full">
+                    <div className="h-5 bg-gray-200 rounded w-64 mb-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-44 mb-4"></div>
+                    <div className="h-4 bg-gray-200 rounded w-96 mb-4"></div>
+                    <div className="flex flex-row gap-2 items-center w-full mb-4">
+                      <div className="h-16 w-16 bg-gray-200 rounded-xl"></div>
+                      <div className="h-16 w-16 bg-gray-200 rounded-xl"></div>
+                      <div className="h-16 w-16 bg-gray-200 rounded-xl"></div>
+                    </div>
+                    <div className="h-10 bg-gray-200 rounded-xl w-full mb-4"></div>
+                    <div className="h-10 bg-gray-200 rounded-xl w-full mb-4"></div>
+                  </div>
+                </div>
+              )}
+              {step === 3 && (
+                <div className="flex items-start gap-4">
+                  <div className="flex flex-col gap-2 items-center">
+                    <div className="h-8 w-8 rounded-full bg-gray-200"></div>
+                    <div className="h-96 bg-gray-200 rounded w-1"></div>
+                  </div>
+                  <div className="mt-1 w-full">
                     <div className="h-5 bg-gray-200 rounded w-48 mb-2"></div>
                     <div className="h-4 bg-gray-200 rounded w-full mb-4"></div>
-                    <div className="flex flex-row gap-2 items-center w-full">
-                      <div className="h-9 bg-gray-200 rounded w-full"></div>
-                      <div className="h-9 bg-gray-200 rounded w-24"></div>
-                    </div>
+                    <div className="h-10 bg-gray-200 rounded-xl w-full mb-4"></div>
+                    <div className="h-10 bg-gray-200 rounded-xl w-full mb-4"></div>
+                    <div className="h-48 bg-gray-200 rounded-xl w-full mb-4"></div>
+                  </div>
+                </div>
+              )}
+              {step === 4 && (
+                <div className="flex items-start gap-4">
+                  <div className="flex flex-col gap-2 items-center">
+                    <div className="h-8 w-8 rounded-full bg-gray-200"></div>
+                    <div className="h-80 bg-gray-200 rounded w-1"></div>
+                  </div>
+                  <div className="mt-1 w-full">
+                    <div className="h-5 bg-gray-200 rounded w-48 mb-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
+                    <div className="h-4 bg-gray-200 rounded-md w-20 mb-4"></div>
+                    <div className="h-8 bg-gray-200 rounded-xl w-48 mb-4"></div>
+                    <div className="h-48 bg-gray-200 rounded-xl w-full mb-4"></div>
                   </div>
                 </div>
               )}