Add skeleton loader (jenkinsci#690)

Author: janfaracik

src/main/frontend/common/tree-api.ts

@@ -4,8 +4,6 @@ import startPollingPipelineStatus from "../pipeline-graph-view/pipeline-graph/ma
 import { getRunStatusFromPath, RunStatus } from "./RestClient.tsx";
 import { mergeStageInfos } from "./utils/stage-merge.ts";
 
-const onPipelineComplete = () => undefined;
-
 const onPollingError = (err: Error) =>
   console.log("There was an error when polling the pipeline status", err);
 
@@ -18,6 +16,7 @@ export default function useRunPoller({
   previousRunPath,
 }: RunPollerProps) {
   const [run, setRun] = useState<RunStatus>();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     let onPipelineDataReceived: (data: RunStatus) => void;
@@ -48,13 +47,14 @@ export default function useRunPoller({
     startPollingPipelineStatus(
       onPipelineDataReceived,
       onPollingError,
-      onPipelineComplete,
+      () => setLoading(false),
       currentRunPath,
     );
   }, []);
 
   return {
     run,
+    loading,
   };
 }
 

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -6,6 +6,7 @@ import React from "react";
 
 import Dropdown from "../../../common/components/dropdown.tsx";
 import DropdownPortal from "../../../common/components/dropdown-portal.tsx";
+import Skeleton from "./components/skeleton.tsx";
 import Stages from "./components/stages.tsx";
 import StagesCustomization from "./components/stages-customization.tsx";
 import DataTreeView from "./DataTreeView.tsx";
@@ -31,6 +32,7 @@ export default function PipelineConsole() {
     handleStageSelect,
     onStepToggle,
     onMoreConsoleClick,
+    loading,
   } = useStepsPoller({ currentRunPath, previousRunPath });
 
   return (
@@ -59,14 +61,17 @@ export default function PipelineConsole() {
         storageKey="graph"
       >
         {(mainViewVisibility === "both" ||
-          mainViewVisibility === "graphOnly") && (
-          <Stages
-            stages={stages}
-            selectedStage={openStage || undefined}
-            stageViewPosition={stageViewPosition}
-            onStageSelect={handleStageSelect}
-          />
-        )}
+          mainViewVisibility === "graphOnly") &&
+          (loading ? (
+            <Skeleton />
+          ) : (
+            <Stages
+              stages={stages}
+              selectedStage={openStage || undefined}
+              stageViewPosition={stageViewPosition}
+              onStageSelect={handleStageSelect}
+            />
+          ))}
 
         <SplitView storageKey="stages">
           {(mainViewVisibility === "both" ||
@@ -76,23 +81,37 @@ export default function PipelineConsole() {
               id="tree-view-pane"
               className="pgv-sticky-sidebar"
             >
-              <DataTreeView
-                onNodeSelect={(_, nodeId) => handleStageSelect(nodeId)}
-                selected={openStage?.id}
-                stages={stages}
-              />
+              {loading ? (
+                <div className={"pgv-skeleton-column"}>
+                  <Skeleton height={2.625} />
+                  <Skeleton height={20} />
+                </div>
+              ) : (
+                <DataTreeView
+                  onNodeSelect={(_, nodeId) => handleStageSelect(nodeId)}
+                  selected={openStage?.id}
+                  stages={stages}
+                />
+              )}
             </div>
           )}
 
           <div key="stage-view" id="stage-view-pane">
-            <StageView
-              stage={openStage}
-              steps={openStageSteps}
-              stepBuffers={openStageStepBuffers}
-              expandedSteps={expandedSteps}
-              onStepToggle={onStepToggle}
-              onMoreConsoleClick={onMoreConsoleClick}
-            />
+            {loading ? (
+              <div className={"pgv-skeleton-column"}>
+                <Skeleton height={2.625} />
+                <Skeleton height={20} />
+              </div>
+            ) : (
+              <StageView
+                stage={openStage}
+                steps={openStageSteps}
+                stepBuffers={openStageStepBuffers}
+                expandedSteps={expandedSteps}
+                onStepToggle={onStepToggle}
+                onMoreConsoleClick={onMoreConsoleClick}
+              />
+            )}
           </div>
         </SplitView>
       </SplitView>

src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.scss

@@ -0,0 +1,14 @@
+.pgv-skeleton {
+  background: var(--button-background);
+  border: 1.5px solid
+    color-mix(in srgb, var(--text-color-secondary) 3%, transparent);
+  border-radius: var(--form-input-border-radius);
+  height: 100%;
+  animation: pulse-skeleton 2s both ease-in-out infinite;
+}
+
+@keyframes pulse-skeleton {
+  50% {
+    background: var(--button-background--active);
+  }
+}

src/main/frontend/pipeline-console-view/pipeline-console/main/components/skeleton.tsx

@@ -0,0 +1,18 @@
+import "./skeleton.scss";
+
+import React from "react";
+
+export default function Skeleton({ height }: { height?: number }) {
+  return (
+    <div
+      className={"pgv-skeleton"}
+      style={
+        height
+          ? {
+              height: `${height}rem`,
+            }
+          : {}
+      }
+    />
+  );
+}

src/main/frontend/pipeline-console-view/pipeline-console/main/hooks/use-steps-poller.ts

@@ -13,7 +13,7 @@ import {
 } from "../PipelineConsoleModel.tsx";
 
 export function useStepsPoller(props: RunPollerProps) {
-  const { run } = useRunPoller({
+  const { run, loading } = useRunPoller({
     currentRunPath: props.currentRunPath,
     previousRunPath: props.previousRunPath,
   });
@@ -258,6 +258,7 @@ export function useStepsPoller(props: RunPollerProps) {
     handleStageSelect,
     onStepToggle,
     onMoreConsoleClick,
+    loading,
   };
 }
 

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -67,3 +67,9 @@
   position: sticky;
   top: calc(var(--header-height) + var(--section-padding));
 }
+
+.pgv-skeleton-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}