nice switch transition

packages/web/pages/s/index.tsx

@@ -9,7 +9,11 @@ import Header from "../../components/v2/Header";
 import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
 import { currPagePath } from "../../recoil/main";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import {
+  CSSTransition,
+  TransitionGroup,
+  SwitchTransition,
+} from "react-transition-group";
 
 export default function Me() {
   // figure out what content to render from here
@@ -51,18 +55,18 @@ export default function Me() {
       <div className="flex-1 flex flex-row items-stretch">
         <Sidebar />
 
-        <TransitionGroup>
+        <SwitchTransition>
           <CSSTransition
             appear={true}
             key={Math.random()}
-            timeout={1200}
+            timeout={400}
             classNames="slide"
           >
             <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
               {getCurrentContent()}
             </div>
           </CSSTransition>
-        </TransitionGroup>
+        </SwitchTransition>
       </div>
     </div>
   );