Merge pull request #288 from priyanshuverma-dev/feat-page-animation

feat: Page Transition Animation

client/package.json

@@ -32,6 +32,7 @@
     "cmdk": "1.0.0",
     "emoji-picker-react": "^4.12.0",
     "export-from-json": "^1.7.4",
+    "framer-motion": "^11.11.11",
     "i18next": "^23.16.4",
     "lucide-react": "^0.453.0",
     "moment": "^2.30.1",

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { Route } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import DashboardPage from "./pages/Dashboard";
@@ -21,13 +21,15 @@ import ScrollToTop from "react-scroll-to-top";
 import { ArrowBigUpDash } from "lucide-react";
 import LeaderboardPage from "./pages/Leaderboard";
 import ChatbotViewPage from "./pages/ChatbotView";
-import TextToSpeechDownload from "./pages/Test";
 import MyImagesPage from "./pages/MyImages";
 import MyChatbotsPage from "./pages/MyChatbots";
+import { AnimatePresence } from "framer-motion";
 import CustomSwitch from "./lib/custom-switch";
 
 const queryClient = new QueryClient();
+
 function App() {
+  const location = useLocation();
   return (
     <SettingsProvider>
       <QueryClientProvider client={queryClient}>
@@ -40,28 +42,37 @@ function App() {
             />
             <Modals />
             <Toaster />
-            <CustomSwitch>
-              <Route path="*" element={<NotFound />} />
-              <Route path="/" element={<LandingPage />} />
-              <Route path="/test" element={<TextToSpeechDownload />} />
-              <Route path="/login" element={<LoginPage />} />
-              <Route path="/signup" element={<SignupPage />} />
-              <Route path="/anonymous" element={<AnonymousPage />} />
+            <AnimatePresence mode="wait">
+              <CustomSwitch>
+                <Routes location={location} key={location.pathname}>
+                  <Route path="*" element={<NotFound />} />
+                  <Route path="/" element={<LandingPage />} />
+                  <Route path="/login" element={<LoginPage />} />
+                  <Route path="/signup" element={<SignupPage />} />
+                  <Route path="/anonymous" element={<AnonymousPage />} />
 
-              <Route element={<ProtectedRoute />}>
-                <Route path="/chatbot/:id" element={<ChatbotPage />} />
-                <Route path="/imagine" element={<ImaginePage />} />
+                  <Route element={<ProtectedRoute />}>
+                    <Route path="/chatbot/:id" element={<ChatbotPage />} />
+                    <Route path="/imagine" element={<ImaginePage />} />
 
-                <Route path="/dashboard" element={<DashboardPage />} />
-                <Route path="/hub" element={<HubPage />} />
-                <Route path="/hub/:chatbotId" element={<ChatbotViewPage />} />
-                <Route path="/profile" element={<ProfilePage />} />
-                <Route path="/profile/:username" element={<ProfilePage />} />
-                <Route path="/leaderboard" element={<LeaderboardPage />} />
-                <Route path="/images" element={<MyImagesPage />} />
-                <Route path="/chatbots" element={<MyChatbotsPage />} />
-              </Route>
-            </CustomSwitch>
+                    <Route path="/dashboard" element={<DashboardPage />} />
+                    <Route path="/hub" element={<HubPage />} />
+                    <Route
+                      path="/hub/:chatbotId"
+                      element={<ChatbotViewPage />}
+                    />
+                    <Route path="/profile" element={<ProfilePage />} />
+                    <Route
+                      path="/profile/:username"
+                      element={<ProfilePage />}
+                    />
+                    <Route path="/leaderboard" element={<LeaderboardPage />} />
+                    <Route path="/images" element={<MyImagesPage />} />
+                    <Route path="/chatbots" element={<MyChatbotsPage />} />
+                  </Route>
+                </Routes>
+              </CustomSwitch>
+            </AnimatePresence>
           </AuthProvider>
         </CopilotKit>
       </QueryClientProvider>

client/src/components/transition.tsx

@@ -0,0 +1,25 @@
+import { motion } from "framer-motion";
+
+const transition = (OgComponent: any) => {
+  return () => (
+    <>
+      <OgComponent />
+      <motion.div
+        className="slide-in"
+        initial={{ scaleY: 0 }}
+        animate={{ scaleY: 0 }}
+        exit={{ scaleY: 1 }}
+        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+      />
+      <motion.div
+        className="slide-out"
+        initial={{ scaleY: 1 }}
+        animate={{ scaleY: 0 }}
+        exit={{ scaleY: 0 }}
+        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+      />
+    </>
+  );
+};
+
+export default transition;

client/src/index.css

@@ -4,6 +4,26 @@
 @tailwind components;
 @tailwind utilities;
 
+.slide-in {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #0f0f0f;
+  transform-origin: bottom;
+}
+
+.slide-out {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #0f0f0f;
+  transform-origin: top;
+}
+
 html {
   font-family: "Poppins", sans-serif;
 }

client/src/pages/404.tsx

@@ -1,7 +1,8 @@
+import transition from "@/components/transition";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-export default function NotFound() {
+const NotFound = () => {
   const { t } = useTranslation();
   return (
     <div className="flex flex-col items-center justify-center h-full w-full">
@@ -14,4 +15,6 @@ export default function NotFound() {
       <p className="text-lg text-gray-600">{t("notfound.goto")}</p>
     </div>
   );
-}
+};
+
+export default transition(NotFound);

client/src/pages/Anonymous.tsx

@@ -1,4 +1,5 @@
 import Separator from "@/components/Separator";
+import transition from "@/components/transition";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -22,7 +23,7 @@ import Markdown from "react-markdown";
 import { Link } from "react-router-dom";
 import { z } from "zod";
 
-export default function AnonymousPage() {
+function AnonymousPage() {
   const [loading, setLoading] = useState(false); // Loading state for request
   const [messages, setMessages] = useState<Chat[]>([]);
   const { t } = useTranslation();
@@ -157,3 +158,5 @@ export default function AnonymousPage() {
     </div>
   );
 }
+
+export default transition(AnonymousPage);

client/src/pages/Chatbot.tsx

@@ -52,8 +52,9 @@ import useSpeech from "@/hooks/useSpeech";
 import EmojiPicker from "emoji-picker-react";
 import exportFromJSON, { ExportType } from "export-from-json";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function ChatbotPage() {
+function ChatbotPage() {
   const { id } = useParams();
   if (!id) return null;
 
@@ -418,3 +419,5 @@ function Loading() {
     </div>
   );
 }
+
+export default transition(ChatbotPage);

client/src/pages/ChatbotView.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/Navbar";
+import transition from "@/components/transition";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -35,7 +36,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-export default function ChatbotViewPage() {
+function ChatbotViewPage() {
   const { chatbotId } = useParams();
   const { loading, user } = useAuth();
   const navigate = useNavigate();
@@ -379,3 +380,5 @@ export default function ChatbotViewPage() {
     </>
   );
 }
+
+export default transition(ChatbotViewPage);

client/src/pages/Dashboard.tsx

@@ -11,8 +11,9 @@ import { ChatbotCard } from "@/components/ChatbotCard";
 import BotsLoading from "@/components/BotsLoading";
 import { imageSrc, welcomeMessages } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function DashboardPage() {
+function DashboardPage() {
   const { user, loading } = useAuth();
   const createChatbotModal = useCreateChatbotModal();
   const { t } = useTranslation();
@@ -215,3 +216,5 @@ export default function DashboardPage() {
     </>
   );
 }
+
+export default transition(DashboardPage);

client/src/pages/Hub.tsx

@@ -17,8 +17,9 @@ import { useState } from "react";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function HubPage() {
+function HubPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const { t } = useTranslation();
   const [selectedCategory, setSelectedCategory] = useState("All");
@@ -144,3 +145,5 @@ export default function HubPage() {
     </>
   );
 }
+
+export default transition(HubPage);

client/src/pages/Imagine.tsx

@@ -1,4 +1,5 @@
 import Separator from "@/components/Separator";
+import transition from "@/components/transition";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -27,7 +28,7 @@ import toast from "react-hot-toast";
 import { Link } from "react-router-dom";
 import { z } from "zod";
 
-export default function ImaginePage() {
+function ImaginePage() {
   const { data } = useQuery({
     queryKey: ["images"],
     queryFn: fetchImagesData,
@@ -197,3 +198,5 @@ function Loading() {
     </div>
   );
 }
+
+export default transition(ImaginePage);

client/src/pages/Landing.tsx

@@ -4,8 +4,9 @@ import Separator from "../components/Separator";
 import Footer from "@/components/Footer";
 import { useAuth } from "@/contexts/auth-context";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function LandingPage() {
+function LandingPage() {
   const { user } = useAuth();
   const { t } = useTranslation();
   return (
@@ -96,3 +97,5 @@ export default function LandingPage() {
     </>
   );
 }
+
+export default transition(LandingPage);

client/src/pages/Leaderboard.tsx

@@ -13,8 +13,9 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import transition from "@/components/transition";
 
-export default function LeaderboardPage() {
+function LeaderboardPage() {
   const { t } = useTranslation();
   const { data, isLoading } = useQuery({
     queryFn: () =>
@@ -109,3 +110,4 @@ export default function LeaderboardPage() {
     </div>
   );
 }
+export default transition(LeaderboardPage);

client/src/pages/Login.tsx

@@ -28,8 +28,9 @@ import toast from "react-hot-toast";
 import { useAuth } from "@/contexts/auth-context";
 import { Loader2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function LoginPage() {
+function LoginPage() {
   const { login } = useAuth();
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -128,3 +129,5 @@ export default function LoginPage() {
     </div>
   );
 }
+
+export default transition(LoginPage);

client/src/pages/MyChatbots.tsx

@@ -1,5 +1,6 @@
 import BotsLoading from "@/components/BotsLoading";
 import Navbar from "@/components/Navbar";
+import transition from "@/components/transition";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,7 +20,7 @@ import { Flag, Heart, Pencil, Send, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-export default function MyChatbotsPage() {
+function MyChatbotsPage() {
   const { loading, user } = useAuth();
   const qc = useQueryClient();
   const { t } = useTranslation();
@@ -214,3 +215,4 @@ export default function MyChatbotsPage() {
     </div>
   );
 }
+export default transition(MyChatbotsPage);

client/src/pages/MyImages.tsx

@@ -1,5 +1,6 @@
 import BotsLoading from "@/components/BotsLoading";
 import Navbar from "@/components/Navbar";
+import transition from "@/components/transition";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -16,7 +17,7 @@ import { Flag, Heart, Send, Trash2 } from "lucide-react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-export default function MyImagesPage() {
+function MyImagesPage() {
   const { loading, user } = useAuth();
   const qc = useQueryClient();
   const deleteModal = useDeleteChatbotModal();
@@ -181,3 +182,5 @@ export default function MyImagesPage() {
     </div>
   );
 }
+
+export default transition(MyImagesPage);

client/src/pages/Profile.tsx

@@ -25,8 +25,9 @@ import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ImageCard } from "@/components/ImageCard";
 import { useTranslation } from "react-i18next";
+import transition from "@/components/transition";
 
-export default function ProfilePage() {
+function ProfilePage() {
   const { username } = useParams();
   const profileUpdateModal = useUpdateProfileModal();
   const settingsModal = useSettingsModal();
@@ -292,3 +293,5 @@ function ChatbotLoading() {
     </div>
   ));
 }
+
+export default transition(ProfilePage);