Added progress state to dequeued

Author: samejr

apps/webapp/app/components/run/RunTimeline.tsx

@@ -387,8 +387,19 @@ function EventMarker({
                 ? "bg-success"
                 : state === "error"
                 ? "bg-error"
+                : state === "inprogress"
+                ? "animate-tile-scroll-offset bg-pending"
                 : "bg-text-dimmed"
             )}
+            style={
+              state === "inprogress"
+                ? {
+                    height: "100%",
+                    backgroundImage: `url(${tileBgPath})`,
+                    backgroundSize: "8px 8px",
+                  }
+                : undefined
+            }
           />
           <div
             className={cn(
@@ -397,6 +408,8 @@ function EventMarker({
                 ? "border-success"
                 : state === "error"
                 ? "border-error"
+                : state === "inprogress"
+                ? "border-pending"
                 : "border-text-dimmed"
             )}
           />
@@ -407,8 +420,19 @@ function EventMarker({
                 ? "bg-success"
                 : state === "error"
                 ? "bg-error"
+                : state === "inprogress"
+                ? "animate-tile-scroll-offset bg-pending"
                 : "bg-text-dimmed"
             )}
+            style={
+              state === "inprogress"
+                ? {
+                    height: "100%",
+                    backgroundImage: `url(${tileBgPath})`,
+                    backgroundSize: "8px 8px",
+                  }
+                : undefined
+            }
           />
         </>
       );
@@ -431,7 +455,7 @@ function EventMarker({
               : state === "error"
               ? "bg-error"
               : state === "inprogress"
-              ? "animate-tile-move-offset bg-pending"
+              ? "animate-tile-scroll-offset bg-pending"
               : "bg-text-dimmed"
           )}
           style={

apps/webapp/tailwind.config.js

@@ -260,7 +260,7 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "tile-scroll": "tile-move 0.5s infinite linear",
-        "tile-move-offset": "tile-move-offset 0.5s infinite linear",
+        "tile-scroll-offset": "tile-move-offset 0.5s infinite linear",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(closest-side, var(--tw-gradient-stops))",