fix(webapp): Make spans fluid again while task is executing

Author: 0ski

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -959,6 +959,7 @@ function TimelineView({
   const initialTimelineDimensions = useInitialDimensions(timelineContainerRef);
   const minTimelineWidth = initialTimelineDimensions?.width ?? 300;
   const maxTimelineWidth = minTimelineWidth * 10;
+  const disableSpansAnimations = rootSpanStatus === "executing";
 
   //we want to live-update the duration if the root span is still executing
   const [duration, setDuration] = useState(queueAdjustedNs(totalDuration, queuedDuration));
@@ -1130,8 +1131,8 @@ function TimelineView({
                                     "-ml-[0.5px] h-[0.5625rem] w-px rounded-none",
                                     eventBackgroundClassName(node.data)
                                   )}
-                                  layoutId={node.data.isPartial ? `${node.id}-${event.name}` : undefined}
-                                  animate={!node.data.isPartial ? false : undefined}
+                                  layoutId={disableSpansAnimations ? `${node.id}-${event.name}` : undefined}
+                                  animate={disableSpansAnimations ? undefined : false}
                                 />
                               )}
                             </Timeline.Point>
@@ -1149,8 +1150,8 @@ function TimelineView({
                                     "-ml-[0.1562rem] size-[0.3125rem] rounded-full border bg-background-bright",
                                     eventBorderClassName(node.data)
                                   )}
-                                  layoutId={node.data.isPartial ? `${node.id}-${event.name}` : undefined}
-                                  animate={!node.data.isPartial ? false : undefined}
+                                  layoutId={disableSpansAnimations ? `${node.id}-${event.name}` : undefined}
+                                  animate={disableSpansAnimations ? undefined : false}
                                 />
                               )}
                             </Timeline.Point>
@@ -1169,8 +1170,8 @@ function TimelineView({
                           >
                             <motion.div
                               className={cn("h-px w-full", eventBackgroundClassName(node.data))}
-                              layoutId={node.data.isPartial ? `mark-${node.id}` : undefined}
-                              animate={!node.data.isPartial ? false : undefined}
+                              layoutId={disableSpansAnimations ? `mark-${node.id}` : undefined}
+                              animate={disableSpansAnimations ? undefined : false}
                             />
                           </Timeline.Span>
                         ) : null}
@@ -1193,6 +1194,7 @@ function TimelineView({
                           }
                           node={node}
                           fadeLeft={isTopSpan && queuedDuration !== undefined}
+                          disableAnimations={disableSpansAnimations}
                         />
                       </>
                     ) : (
@@ -1207,8 +1209,8 @@ function TimelineView({
                               "-ml-0.5 size-3 rounded-full border-2 border-background-bright",
                               eventBackgroundClassName(node.data)
                             )}
-                            layoutId={node.data.isPartial ? node.id : undefined}
-                            animate={!node.data.isPartial ? false : undefined}
+                            layoutId={disableSpansAnimations ? node.id : undefined}
+                            animate={disableSpansAnimations ? undefined : false}
                           />
                         )}
                       </Timeline.Point>
@@ -1440,8 +1442,9 @@ function SpanWithDuration({
   showDuration,
   node,
   fadeLeft,
+  disableAnimations,
   ...props
-}: Timeline.SpanProps & { node: TraceEvent; showDuration: boolean; fadeLeft: boolean }) {
+}: Timeline.SpanProps & { node: TraceEvent; showDuration: boolean; fadeLeft: boolean; disableAnimations?: boolean }) {
   return (
     <Timeline.Span {...props}>
       <motion.div
@@ -1451,8 +1454,8 @@ function SpanWithDuration({
           fadeLeft ? "rounded-r-sm bg-gradient-to-r from-black/50 to-transparent" : "rounded-sm"
         )}
         style={{ backgroundSize: "20px 100%", backgroundRepeat: "no-repeat" }}
-        layoutId={node.data.isPartial ? node.id : undefined}
-        animate={!node.data.isPartial ? false : undefined}
+        layoutId={disableAnimations ? node.id : undefined}
+        animate={disableAnimations ? undefined : false}
       >
         {node.data.isPartial && (
           <div
@@ -1465,12 +1468,12 @@ function SpanWithDuration({
             "sticky left-0 z-10 transition-opacity group-hover:opacity-100",
             !showDuration && "opacity-0"
           )}
-          animate={!node.data.isPartial ? false : undefined}
+          animate={disableAnimations ? undefined : false}
         >
           <motion.div
             className="whitespace-nowrap rounded-sm px-1 py-0.5 text-xxs text-text-bright text-shadow-custom"
-            layout={node.data.isPartial ? "position" : undefined}
-            animate={!node.data.isPartial ? false : undefined}
+            layout={disableAnimations ? "position" : undefined}
+            animate={disableAnimations ? undefined : false}
           >
             {formatDurationMilliseconds(props.durationMs, {
               style: "short",