@workflow/web-shared 4.1.0-beta.63 → 4.1.0-beta.65

package/src/components/workflow-trace-view.tsx

@@ -31,6 +31,7 @@ import {
 } from './trace-viewer';
 import type { Span } from './trace-viewer/types';
 import { Skeleton } from './ui/skeleton';
+import { Spinner } from './ui/spinner';
 import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
@@ -706,36 +707,20 @@ function PanelResizeHandle({
 function TraceViewerFooter({
   hasMore,
   isLive,
+  isInitialLoading,
 }: {
   hasMore: boolean;
   isLive: boolean;
+  isInitialLoading: boolean;
 }): ReactNode {
   const style = { color: 'var(--ds-gray-900)' };
-  if (hasMore) {
+  if (hasMore || isInitialLoading) {
     return (
       <div
         className="flex items-center justify-center gap-2 py-3 text-xs"
         style={style}
       >
-        <svg
-          className="h-3.5 w-3.5 animate-spin"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
+        <Spinner size={14} />
         Loading more events…
       </div>
     );
@@ -783,6 +768,7 @@ export const WorkflowTraceViewer = ({
   isLoadingMoreSpans = false,
   encryptionKey,
   onDecrypt,
+  isDecrypting = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -821,6 +807,8 @@ export const WorkflowTraceViewer = ({
   encryptionKey?: Uint8Array;
   /** Callback to initiate decryption of encrypted run data */
   onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched */
+  isDecrypting?: boolean;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -997,9 +985,13 @@ export const WorkflowTraceViewer = ({
               isLive={isLive}
               trace={trace}
               knownDurationMs={traceWithMeta?.knownDurationMs}
-              hasMoreData={hasMoreSpans}
+              hasMoreData={hasMoreSpans || Boolean(isLoading)}
               footer={
-                <TraceViewerFooter hasMore={hasMoreSpans} isLive={isLive} />
+                <TraceViewerFooter
+                  hasMore={hasMoreSpans}
+                  isLive={isLive}
+                  isInitialLoading={Boolean(isLoading)}
+                />
               }
             />
           </TraceViewerWithContextMenu>
@@ -1150,6 +1142,7 @@ export const WorkflowTraceViewer = ({
                 onResolveHook={onResolveHook}
                 encryptionKey={encryptionKey}
                 onDecrypt={onDecrypt}
+                isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>