From 4b8ff03097735e61dce04534fd5483d677d80b25 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Mon, 10 Jun 2024 23:09:31 -0600
Subject: [PATCH] feat(db-playground): more animation improvements

---
 apps/database-playground/app/page.tsx | 29 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/database-playground/app/page.tsx b/apps/database-playground/app/page.tsx
index 927b323ddcc..f963ab87629 100644
--- a/apps/database-playground/app/page.tsx
+++ b/apps/database-playground/app/page.tsx
@@ -372,16 +372,31 @@ export default function Page() {
                       ))}
                     </m.div>
                   ) : (
-                    <div className="flex flex-col gap-6 justify-center items-center">
+                    <m.div
+                      className="flex flex-row gap-4 justify-center items-center"
+                      variants={{
+                        hidden: {
+                          opacity: 0,
+                          y: -10,
+                        },
+                        show: {
+                          opacity: 1,
+                          y: 0,
+                          transition: {
+                            delay: 0.5,
+                          },
+                        },
+                      }}
+                      initial="hidden"
+                      animate="show"
+                    >
+                      <m.div layoutId="ai-loading-icon">
+                        <AiIconAnimation loading />
+                      </m.div>
                       <h3 className="text-lg italic font-light text-neutral-500">
                         Brainstorming some ideas
                       </h3>
-                      <div className="scale-75">
-                        <m.div layoutId="ai-loading-icon">
-                          <AiIconAnimation loading />
-                        </m.div>
-                      </div>
-                    </div>
+                    </m.div>
                   )}
                 </div>
               </div>