From 31e3aca3ea6c20e1f6d3714be40f6789e08ea041 Mon Sep 17 00:00:00 2001
From: Everett Pompeii <epompeii@protonmail.com>
Date: Mon, 25 Nov 2024 07:50:55 -0500
Subject: [PATCH] smooth_loading

---
 .../console/perf/FallbackPerfPanel.astro      | 12 +--
 .../console/perf/plot/PlotHeader.tsx          | 78 ++++++++++---------
 .../components/console/plots/FallbackPlot.tsx | 52 ++++++++++++-
 .../console/plots/FallbackPlots.tsx           |  8 +-
 .../components/console/plots/PlotsPanel.tsx   | 49 ++++++++----
 5 files changed, 134 insertions(+), 65 deletions(-)

diff --git a/services/console/src/components/console/perf/FallbackPerfPanel.astro b/services/console/src/components/console/perf/FallbackPerfPanel.astro
index 5ef59ed7a..aa5af94e2 100644
--- a/services/console/src/components/console/perf/FallbackPerfPanel.astro
+++ b/services/console/src/components/console/perf/FallbackPerfPanel.astro
@@ -12,11 +12,13 @@ import Pagination, { PaginationSize } from "../../site/Pagination";
 <div class="columns">
     <div class="column">
         <div class="panel">
-            <nav class="panel-heading columns is-vcentered">
-                <div class="column">
-                    &nbsp;
-                    <br/>
-                    &nbsp;
+            <nav class="panel-heading">
+                <div class="columns is-vcentered">
+                    <div class="column">
+                        &nbsp;
+                        <br/>
+                        &nbsp;
+                    </div>
                 </div>
             </nav>
             <div class="panel-block">
diff --git a/services/console/src/components/console/perf/plot/PlotHeader.tsx b/services/console/src/components/console/perf/plot/PlotHeader.tsx
index fc0186077..a35a97e94 100644
--- a/services/console/src/components/console/perf/plot/PlotHeader.tsx
+++ b/services/console/src/components/console/perf/plot/PlotHeader.tsx
@@ -140,53 +140,55 @@ const FullPlotHeader = (props: Props) => {
 	};
 
 	return (
-		<nav class="panel-heading columns is-vcentered">
-			<div class="column">
-				<div class="level is-mobile" style="margin-bottom: 0.5rem;">
-					<div class="level-left">
-						<div class="level-item">
-							<p id={BENCHER_MEASURE_ID} class="level-item">
-								Measure
-							</p>
-							<Show when={measure() && measure()?.uuid !== BENCHER_MEASURE}>
-								<a
-									class="level-item button is-small is-rounded"
-									style="margin-left: 1rem;"
-									title={`${props.isConsole ? "Manage" : "View"} ${
-										measure()?.name
-									}`}
-									href={`
+		<nav class="panel-heading">
+			<div class="columns is-vcentered">
+				<div class="column">
+					<div class="level is-mobile" style="margin-bottom: 0.5rem;">
+						<div class="level-left">
+							<div class="level-item">
+								<p id={BENCHER_MEASURE_ID} class="level-item">
+									Measure
+								</p>
+								<Show when={measure() && measure()?.uuid !== BENCHER_MEASURE}>
+									<a
+										class="level-item button is-small is-rounded"
+										style="margin-left: 1rem;"
+										title={`${props.isConsole ? "Manage" : "View"} ${
+											measure()?.name
+										}`}
+										href={`
 										${resourcePath(
 											props.isConsole,
 										)}/${props.project_slug()}/measures/${
 											measure()?.slug
 										}?${BACK_PARAM}=${encodePath()}`}
-								>
-									<small>{props.isConsole ? "Manage" : "View"}</small>
-								</a>
-							</Show>
+									>
+										<small>{props.isConsole ? "Manage" : "View"}</small>
+									</a>
+								</Show>
+							</div>
 						</div>
 					</div>
+					<select
+						class="card-header-title level-item"
+						style="color: black;"
+						title="Select Measure"
+						onInput={(e) => handleInput(e.currentTarget.value)}
+					>
+						<For each={measures() ?? []}>
+							{(measure: { name: string; uuid: string }) => (
+								<option
+									value={measure.uuid}
+									selected={measure.uuid === selected()}
+								>
+									{measure.name}
+								</option>
+							)}
+						</For>
+					</select>
 				</div>
-				<select
-					class="card-header-title level-item"
-					style="color: black;"
-					title="Select Measure"
-					onInput={(e) => handleInput(e.currentTarget.value)}
-				>
-					<For each={measures() ?? []}>
-						{(measure: { name: string; uuid: string }) => (
-							<option
-								value={measure.uuid}
-								selected={measure.uuid === selected()}
-							>
-								{measure.name}
-							</option>
-						)}
-					</For>
-				</select>
+				<SharedPlot {...props} />
 			</div>
-			<SharedPlot {...props} />
 		</nav>
 	);
 };
diff --git a/services/console/src/components/console/plots/FallbackPlot.tsx b/services/console/src/components/console/plots/FallbackPlot.tsx
index e24a23436..2fee9d4d1 100644
--- a/services/console/src/components/console/plots/FallbackPlot.tsx
+++ b/services/console/src/components/console/plots/FallbackPlot.tsx
@@ -1,11 +1,13 @@
-const FallbackPlot = (props: { spaced?: boolean }) => {
+const FallbackPlot = () => {
 	return (
 		<div>
 			<div class="columns">
-				<div class={`column${props.spaced ? " is-11" : ""}`}>
+				<div class="column">
 					<div class="panel">
-						<nav class="panel-heading columns is-vcentered">
-							<div class="column">&nbsp;</div>
+						<nav class="panel-heading">
+							<div class="columns is-mobile is-centered is-vcentered is-gapless">
+								<div class="column">&nbsp;</div>
+							</div>
 						</nav>
 						<div class="panel-block">
 							<progress
@@ -14,6 +16,48 @@ const FallbackPlot = (props: { spaced?: boolean }) => {
 								max="100"
 							/>
 						</div>
+						<div class="box">
+							<nav class="level is-mobile">
+								<div class="level-left">
+									<div class="level is-mobile">
+										<div class="level-item">
+											<button
+												type="button"
+												class="button is-small is-rounded"
+												title="Move plot"
+												disabled={true}
+											>
+												&nbsp;
+											</button>
+										</div>
+									</div>
+								</div>
+								<div class="level-right">
+									<div class="buttons">
+										<button
+											type="button"
+											class="button is-small"
+											disabled={true}
+											title="View plot"
+										>
+											<span class="icon is-small">
+												<i class="fas fa-external-link-alt" />
+											</span>
+										</button>
+										<button
+											type="button"
+											class="button is-small"
+											disabled={true}
+											title="Plot settings"
+										>
+											<span class="icon is-small">
+												<i class="fas fa-cog" />
+											</span>
+										</button>
+									</div>
+								</div>
+							</nav>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/services/console/src/components/console/plots/FallbackPlots.tsx b/services/console/src/components/console/plots/FallbackPlots.tsx
index bed4b8927..883f2ecce 100644
--- a/services/console/src/components/console/plots/FallbackPlots.tsx
+++ b/services/console/src/components/console/plots/FallbackPlots.tsx
@@ -4,16 +4,16 @@ const FallbackPlots = () => {
 	return (
 		<div class="columns is-multiline is-vcentered">
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot spaced={true} />
+				<FallbackPlot />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot spaced={true} />
+				<FallbackPlot />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot spaced={true} />
+				<FallbackPlot />
 			</div>
 			<div class="column is-11-tablet is-12-desktop is-6-widescreen">
-				<FallbackPlot spaced={true} />
+				<FallbackPlot />
 			</div>
 		</div>
 	);
diff --git a/services/console/src/components/console/plots/PlotsPanel.tsx b/services/console/src/components/console/plots/PlotsPanel.tsx
index 5a356d26f..0f816c0bc 100644
--- a/services/console/src/components/console/plots/PlotsPanel.tsx
+++ b/services/console/src/components/console/plots/PlotsPanel.tsx
@@ -1,15 +1,19 @@
-import bencher_valid_init, { type InitOutput } from "bencher_valid";
+import * as Sentry from "@sentry/astro";
+import { debounce } from "@solid-primitives/scheduled";
 import type { Params } from "astro";
-import type { JsonPlot, JsonProject } from "../../../types/bencher";
+import bencher_valid_init, { type InitOutput } from "bencher_valid";
 import {
+	type Accessor,
 	For,
 	Show,
 	createEffect,
 	createMemo,
 	createResource,
-	type Accessor,
+	createSignal,
 } from "solid-js";
-import { setPageTitle } from "../../../util/resource";
+import { createStore } from "solid-js/store";
+import { perfPath } from "../../../config/util";
+import type { JsonPlot, JsonProject } from "../../../types/bencher";
 import {
 	authUser,
 	isAllowedProjectCreate,
@@ -17,15 +21,12 @@ import {
 	isAllowedProjectEdit,
 } from "../../../util/auth";
 import { httpGet } from "../../../util/http";
-import Pinned from "./Pinned";
-import { DEBOUNCE_DELAY, validJwt } from "../../../util/valid";
-import { createStore } from "solid-js/store";
+import { setPageTitle } from "../../../util/resource";
 import { useSearchParams } from "../../../util/url";
-import PlotsHeader from "./PlotsHeader";
-import { debounce } from "@solid-primitives/scheduled";
+import { DEBOUNCE_DELAY, validJwt } from "../../../util/valid";
 import FallbackPlots from "./FallbackPlots";
-import * as Sentry from "@sentry/astro";
-import { perfPath } from "../../../config/util";
+import Pinned from "./Pinned";
+import PlotsHeader from "./PlotsHeader";
 
 const SEARCH_PARAM = "search";
 const MAX_PLOTS = 64;
@@ -139,11 +140,13 @@ const PlotsPanel = (props: Props) => {
 		return await httpGet(props.apiUrl, path, fetcher.token)
 			.then((resp) => {
 				setPlots(resp?.data as JsonPlot[]);
+				handlePlotsInit();
 				return resp?.data as JsonPlot[];
 			})
 			.catch((error) => {
 				console.error(error);
 				Sentry.captureException(error);
+				handlePlotsInit();
 				return EMPTY_ARRAY;
 			});
 	};
@@ -151,8 +154,21 @@ const PlotsPanel = (props: Props) => {
 		plotsFetcher,
 		getPlots,
 	);
+	const handleRefresh = () => {
+		refetch();
+		setPlotsInit(false);
+	};
+
 	const [plots, setPlots] = createStore<JsonPlot[]>([]);
 	const plotsLength = createMemo(() => plots?.length);
+	const [plotsInit, setPlotsInit] = createSignal(false);
+	const handlePlotsInit = () => {
+		// This lets the plots have a chance to start to render
+		// to prevent the "flashing" of the view-only component
+		setTimeout(() => {
+			setPlotsInit(true);
+		}, 1);
+	};
 
 	const movePlot = (from: number, to: number) => {
 		const newPlots = [...plots];
@@ -210,10 +226,10 @@ const PlotsPanel = (props: Props) => {
 				project={project}
 				search={search}
 				isAllowedCreate={isAllowedCreate}
-				handleRefresh={refetch}
+				handleRefresh={handleRefresh}
 				handleSearch={handleSearch}
 			/>
-			<Show when={projectPlots.loading}>
+			<Show when={projectPlots.loading || !plotsInit()}>
 				<FallbackPlots />
 			</Show>
 			<div class="columns is-multiline is-vcentered">
@@ -249,7 +265,12 @@ const PlotsPanel = (props: Props) => {
 					</div>
 				</Show>
 				<Show
-					when={(!props.isConsole || !isAllowedCreate()) && plotsLength() === 0}
+					when={
+						(!props.isConsole || !isAllowedCreate()) &&
+						!projectPlots.loading &&
+						plotsInit() &&
+						plotsLength() === 0
+					}
 				>
 					<div class="column is-11-tablet is-12-desktop is-6-widescreen">
 						<div class="box">