From 4e2810327d878d22bbdadafed09ec5432835d3d4 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Sun, 20 Oct 2024 00:59:35 -0300
Subject: [PATCH] feat(quick-start): Re-add animation

---
 .../onboardingWizard/newSidebar.tsx           | 76 +++++++++++++++++--
 1 file changed, 69 insertions(+), 7 deletions(-)

diff --git a/static/app/components/onboardingWizard/newSidebar.tsx b/static/app/components/onboardingWizard/newSidebar.tsx
index 5848d5b77d16f..24778eb1af967 100644
--- a/static/app/components/onboardingWizard/newSidebar.tsx
+++ b/static/app/components/onboardingWizard/newSidebar.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
+import {AnimatePresence, motion} from 'framer-motion';
 import partition from 'lodash/partition';
 
 import {navigateTo} from 'sentry/actionCreators/navigation';
@@ -38,6 +39,7 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoWalkthrough} from 'sentry/utils/demoMode';
+import testableTransition from 'sentry/utils/testableTransition';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
@@ -220,6 +222,36 @@ function Task({task, completed, hidePanel}: TaskProps) {
   );
 }
 
+const AnimatedTask = motion(Task);
+
+AnimatedTask.defaultProps = {
+  initial: 'initial',
+  animate: 'animate',
+  exit: 'exit',
+  layout: true,
+  variants: {
+    initial: {
+      opacity: 0,
+      y: 40,
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      transition: testableTransition({
+        delay: 0.8,
+        when: 'beforeChildren',
+        staggerChildren: 0.3,
+      }),
+    },
+    exit: {
+      y: 20,
+      z: -10,
+      opacity: 0,
+      transition: {duration: 0.2},
+    },
+  },
+};
+
 interface TaskGroupProps {
   description: string;
   hidePanel: () => void;
@@ -230,12 +262,31 @@ interface TaskGroupProps {
 
 function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupProps) {
   const [isExpanded, setIsExpanded] = useState(expanded);
-  const {completedTasks, incompletedTasks} = groupTasksByCompletion(tasks);
+  const [completedTasks, setCompletedTasks] = useState([]);
+  const [incompletedTasks, setIncompletedTasks] = useState(tasks);
+  // const {completedTasks, incompletedTasks} = groupTasksByCompletion(tasks);
 
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
 
+  useEffect(() => {
+    // Mocking the async operation with setTimeout
+    const mockAsyncGroupTasks = () => {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({completedTasks: [tasks[0]], incompletedTasks: [tasks[1], tasks[2]]});
+        }, 5000); // 1 second delay
+      });
+    };
+
+    // Call the async function and update state when it resolves
+    mockAsyncGroupTasks().then(x => {
+      setCompletedTasks((x as any).completedTasks);
+      setIncompletedTasks((x as any).incompletedTasks);
+    });
+  }, [tasks]); // This effect runs when `tasks` changes
+
   return (
     <TaskGroupWrapper>
       <TaskGroupHeader role="button" onClick={() => setIsExpanded(!isExpanded)}>
@@ -266,15 +317,26 @@ function TaskGroup({title, description, tasks, expanded, hidePanel}: TaskGroupPr
                 barWidth={2}
               />
             </TaskGroupProgress>
-            {incompletedTasks.map(task => (
-              <Task key={task.task} task={task} hidePanel={hidePanel} />
-            ))}
+            {incompletedTasks.length > 0 && (
+              <AnimatePresence initial={false}>
+                {incompletedTasks.map(task => (
+                  <AnimatedTask key={task.task} task={task} hidePanel={hidePanel} />
+                ))}
+              </AnimatePresence>
+            )}
             {completedTasks.length > 0 && (
               <Fragment>
                 <TaskGroupProgress completed>{t('Completed')}</TaskGroupProgress>
-                {completedTasks.map(task => (
-                  <Task key={task.task} task={task} hidePanel={hidePanel} completed />
-                ))}
+                <AnimatePresence initial={false}>
+                  {completedTasks.map(task => (
+                    <AnimatedTask
+                      key={task.task}
+                      task={task}
+                      hidePanel={hidePanel}
+                      completed
+                    />
+                  ))}
+                </AnimatePresence>
               </Fragment>
             )}
           </TaskGroupBody>