feat(quick-start): Remove animation and reordering

static/app/components/onboardingWizard/content.tsx

@@ -1,7 +1,6 @@
 import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {css, useTheme} 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';
@@ -25,7 +24,6 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
 import {DemoTour, useDemoTours} from 'sentry/utils/demoMode/demoTours';
 import {updateDemoWalkthroughTask} from 'sentry/utils/demoMode/guides';
-import testableTransition from 'sentry/utils/testableTransition';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
@@ -258,35 +256,14 @@ function Task({task, hidePanel}: TaskProps) {
     }
   }, [task.status]);
 
+  const isDoneTask = task.status === 'complete' || task.status === 'skipped';
+
   return (
-    <TaskWrapper
-      initial
-      animate="animate"
-      layout={showSkipConfirmation ? false : true}
-      variants={{
-        initial: {
-          opacity: 0,
-          y: 40,
-        },
-        animate: {
-          opacity: 1,
-          y: 0,
-          transition: testableTransition({
-            delay: 0.8,
-            when: 'beforeChildren',
-            staggerChildren: 0.3,
-          }),
-        },
-      }}
-    >
+    <TaskWrapper>
       <TaskCard
-        onClick={
-          task.status === 'complete' || task.status === 'skipped'
-            ? undefined
-            : handleClick
-        }
+        onClick={isDoneTask ? undefined : handleClick}
         icon={
-          task.status === 'complete' || task.status === 'skipped' ? (
+          isDoneTask ? (
             <TaskStatusIcon status={task.status} tooltipText={iconTooltipText} />
           ) : task.skippable ? (
             <Button
@@ -303,9 +280,9 @@ function Task({task, hidePanel}: TaskProps) {
           ) : undefined
         }
         description={task.description}
-        title={<strong>{task.title}</strong>}
+        title={<strong>{isDoneTask ? <s>{task.title}</s> : task.title}</strong>}
         actions={
-          task.status === 'complete' || task.status === 'skipped' ? undefined : (
+          isDoneTask ? undefined : (
             <ClickIndicator>
               <IconChevron direction="right" size="xs" color="subText" />
             </ClickIndicator>
@@ -327,17 +304,17 @@ function Task({task, hidePanel}: TaskProps) {
 
 interface ExpandedTaskGroupProps {
   hidePanel: () => void;
-  sortedTasks: OnboardingTask[];
+  tasks: OnboardingTask[];
 }
 
-function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
+function ExpandedTaskGroup({tasks, hidePanel}: ExpandedTaskGroupProps) {
   const mutateOnboardingTasks = useMutateOnboardingTasks();
 
   const markCompletionTimeout = useRef<number | undefined>(undefined);
 
   const unseenDoneTasks = useMemo(
-    () => sortedTasks.filter(task => taskIsDone(task) && !task.completionSeen),
-    [sortedTasks]
+    () => tasks.filter(task => taskIsDone(task) && !task.completionSeen),
+    [tasks]
   );
 
   function completionTimeout(time: number): Promise<void> {
@@ -348,7 +325,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
   }
 
   const markTasksAsSeen = useCallback(() => {
-    const tasksToMarkComplete = sortedTasks
+    const tasksToMarkComplete = tasks
       .filter(task => taskIsDone(task) && !task.completionSeen)
       .map(task => ({...task, completionSeen: true}));
 
@@ -359,7 +336,7 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     } else {
       mutateOnboardingTasks.mutate(tasksToMarkComplete);
     }
-  }, [mutateOnboardingTasks, sortedTasks]);
+  }, [mutateOnboardingTasks, tasks]);
 
   const markSeenOnOpen = useCallback(
     async function () {
@@ -385,11 +362,9 @@ function ExpandedTaskGroup({sortedTasks, hidePanel}: ExpandedTaskGroupProps) {
     <Fragment>
       <hr />
       <TaskGroupBody>
-        <AnimatePresence initial={false}>
-          {sortedTasks.map(sortedTask => (
-            <Task key={sortedTask.task} task={sortedTask} hidePanel={hidePanel} />
-          ))}
-        </AnimatePresence>
+        {tasks.map(task => (
+          <Task key={task.task} task={task} hidePanel={hidePanel} />
+        ))}
       </TaskGroupBody>
     </Fragment>
   );
@@ -418,7 +393,7 @@ function TaskGroup({
   const theme = useTheme();
   const organization = useOrganization();
   const [isExpanded, setIsExpanded] = useState(expanded);
-  const {completedTasks, incompletedTasks} = groupTasksByCompletion(tasks);
+  const {completedTasks} = groupTasksByCompletion(tasks);
 
   const [taskGroupComplete, setTaskGroupComplete] = useLocalStorageState(
     `quick-start:${organization.slug}:${group}-completed`,
@@ -494,12 +469,7 @@ function TaskGroup({
           />
         }
       />
-      {isExpanded && (
-        <ExpandedTaskGroup
-          sortedTasks={[...incompletedTasks, ...completedTasks]}
-          hidePanel={hidePanel}
-        />
-      )}
+      {isExpanded && <ExpandedTaskGroup tasks={tasks} hidePanel={hidePanel} />}
     </TaskGroupWrapper>
   );
 }
@@ -550,7 +520,7 @@ export function OnboardingSidebarContent({onClose}: OnboardingSidebarContentProp
       )}
       {allTasks.length === doneTasks.length && (
         <CompletionCelebrationText>
-          <div>{t('Good job, you’re all done here!')}</div>
+          <div>{t('Good job, you’re all done here!!')}</div>
           {t('Now get out of here and write some broken code.')}
         </CompletionCelebrationText>
       )}
@@ -601,7 +571,7 @@ const TaskGroupBody = styled('ul')`
   margin: 0;
 `;
 
-const TaskWrapper = styled(motion.li)`
+const TaskWrapper = styled('li')`
   gap: ${space(1)};
   p {
     color: ${p => p.theme.subText};