Tweaked thumbnail spinner behavior

Author: AlexKempen

src/backend/features/thumbnails/keys.ts

@@ -5,8 +5,11 @@ import {
 } from "../configurations/canonical";
 import { ThumbnailSize } from "./types";
 
-/** Short on purpose: the real render can land at any moment and must take over. */
-export const THUMBNAIL_FALLBACK_CACHE_TTL = 60;
+/**
+ * Shorter than the client's poll, so each poll reaches the worker instead of
+ * the browser cache replaying the stand-in the real render has replaced.
+ */
+export const THUMBNAIL_FALLBACK_CACHE_TTL = 3;
 
 /** Marks a response as the element default standing in for an unrendered configuration. */
 export const THUMBNAIL_FALLBACK_HEADER = "X-Thumbnail-Fallback";

src/frontend/features/insert/components/configurations.tsx

@@ -11,6 +11,7 @@ import {
 import { useSearch } from "@tanstack/react-router";
 import {
     type Dispatch,
+    JSX,
     ReactNode,
     type SyntheticEvent,
     useCallback,
@@ -251,6 +252,8 @@ interface InputLabelProps {
      * The id of the input the label describes.
      */
     htmlFor: string;
+    /** True to lead with the input instead of the label. */
+    inputFirst?: boolean;
     children: ReactNode;
 }
 
@@ -259,23 +262,43 @@ interface InputLabelProps {
  * input grows to show an error message.
  */
 function InputLabel(props: InputLabelProps) {
-    const { label, htmlFor, children } = props;
+    const { label, htmlFor, inputFirst = false, children } = props;
+    const text = (
+        <Text
+            size="sm"
+            style={{
+                display: "flex",
+                alignItems: "center",
+                height: INPUT_HEIGHT,
+                cursor: "pointer"
+            }}
+            component="label"
+            htmlFor={htmlFor}
+        >
+            {label}
+        </Text>
+    );
+
+    let result: JSX.Element;
+    if (inputFirst) {
+        result = (
+            <>
+                {children}
+                {text}
+            </>
+        );
+    } else {
+        result = (
+            <>
+                {text}
+                {children}
+            </>
+        );
+    }
+
     return (
         <Group gap="sm" align="flex-start">
-            <Text
-                size="sm"
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    height: INPUT_HEIGHT,
-                    cursor: "pointer"
-                }}
-                component="label"
-                htmlFor={htmlFor}
-            >
-                {label}
-            </Text>
-            {children}
+            {result}
         </Group>
     );
 }
@@ -360,7 +383,7 @@ function EnumInput(props: ParameterProps<EnumParameter>): ReactNode {
 function BooleanInput(props: ParameterProps<BooleanParameter>): ReactNode {
     const { parameter, value, onValueChange } = props;
     return (
-        <InputLabel label={parameter.name} htmlFor={parameter.id}>
+        <InputLabel label={parameter.name} htmlFor={parameter.id} inputFirst>
             <Checkbox
                 id={parameter.id}
                 checked={(value ?? parameter.default) === "true"}

src/frontend/features/insert/components/insert-menu.tsx

@@ -10,16 +10,14 @@ import { AppModalBody, AppModalFooter } from "../../../components/app-modal";
 import { MenuTitle } from "../../../components/app-title";
 import { modals } from "@mantine/modals";
 import { showQuickInsertTip } from "../quick-insert-tip";
-import { useIsFetching } from "@tanstack/react-query";
-import { insertableConfigurationQueryMatchKey } from "../../../lib/query-keys";
 import { PreviewImageCard } from "../../thumbnails/components/thumbnail";
 import { FavoriteButton } from "../../favorites/components/favorite-button";
 import { renderNotification } from "../../../lib/notifications";
 import { MenuButton } from "../../../components/app-menu";
 import { InsertableMenuItems } from "../../library/components/insertable-card";
 import { ConfigurationWrapper } from "./configurations";
 import { useInsertMutation } from "../insert-hooks";
-import { useConfigurationQuery } from "../queries";
+import { useConfigurationQuery, useIsFetchingConfiguration } from "../queries";
 import {
     ParameterValues,
     SearchRecord
@@ -192,10 +190,10 @@ function InsertButtons(props: InsertButtonsProps): ReactNode {
     });
     const [uiState, setUiState] = useUiState();
 
-    const isLoadingConfiguration =
-        useIsFetching({
-            queryKey: insertableConfigurationQueryMatchKey(insertable.id)
-        }) > 0;
+    const isLoadingConfiguration = useIsFetchingConfiguration(
+        insertable.id,
+        insertable.microversionId
+    );
 
     const canFasten =
         insertable.supportsFasten &&

src/frontend/features/insert/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useIsFetching, useQuery } from "@tanstack/react-query";
 import { apiGet } from "../../lib/api-client";
 import {
     type ConfigurationResult,
@@ -46,3 +46,15 @@ export function useConfigurationQuery(
         refetchInterval: false
     });
 }
+
+/** Whether {@link useConfigurationQuery} is in flight for this insertable. */
+export function useIsFetchingConfiguration(
+    insertableId: string,
+    microversionId: string
+): boolean {
+    return (
+        useIsFetching({
+            queryKey: configurationQueryKey(insertableId, microversionId)
+        }) > 0
+    );
+}

src/frontend/features/thumbnails/components/thumbnail.tsx

@@ -1,4 +1,4 @@
-import { useIsFetching, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { loadImage, loadImageResult } from "../../../lib/api-client";
 import { ElementType } from "@backend/lib/onshape/element-type";
 import { ThumbnailSize } from "@backend/features/thumbnails/types";
@@ -8,10 +8,13 @@ import { Question } from "@phosphor-icons/react";
 
 import { ComponentPropsWithRef, ReactNode } from "react";
 import { DEFAULT_CANONICAL_CONFIGURATION } from "@backend/features/configurations/canonical";
-import { thumbnailUrl } from "@backend/features/thumbnails/keys";
-import { configurationQueryMatchKey } from "../../../lib/query-keys";
+import {
+    THUMBNAIL_FALLBACK_CACHE_TTL,
+    thumbnailUrl
+} from "@backend/features/thumbnails/keys";
 import { SectionError } from "../../../components/app-zero-state";
 import { useTargetElementType } from "../../insert/insert-hooks";
+import { useIsFetchingConfiguration } from "../../insert/queries";
 import { useIsSignedIn } from "../../auth/access-level";
 import { useIsConnectedToOnshape } from "../../../lib/onshape-params";
 
@@ -170,8 +173,11 @@ interface PreviewImageProps {
     largeThumbnailUrl?: string;
 }
 
-/** How often to re-check while the worker is still standing in the default. */
-const PREVIEW_POLL_MS = 4000;
+/**
+ * How often to re-check while the worker is still standing in the default.
+ * Past the fallback's cache TTL, or the poll never leaves the browser.
+ */
+const PREVIEW_POLL_MS = (THUMBNAIL_FALLBACK_CACHE_TTL + 1) * 1000;
 
 export function PreviewImage(props: PreviewImageProps): ReactNode {
     const {
@@ -185,8 +191,10 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
     const size = ThumbnailSize.LARGE;
     const isSignedIn = useIsSignedIn();
     const isConnected = useIsConnectedToOnshape();
-    const isFetchingConfiguration =
-        useIsFetching({ queryKey: configurationQueryMatchKey() }) > 0;
+    const isFetchingConfiguration = useIsFetchingConfiguration(
+        insertableId,
+        microversionId
+    );
     const targetElementType = useTargetElementType();
 
     const url = thumbnailUrl({
@@ -234,6 +242,11 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
         );
     }
 
+    // Placeholder data is the previous configuration's render, so the spinner
+    // has to cover it too: what is on screen is not what was asked for.
+    const isWaiting =
+        thumbnailQuery.isPlaceholderData || thumbnailQuery.data?.isFallback;
+
     if (thumbnailQuery.isError) {
         const action =
             targetElementType === ElementType.ASSEMBLY ? "insert" : "derive";
@@ -249,7 +262,7 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
                 />
             </Center>
         );
-    } else if (thumbnailQuery.isPending && !thumbnailQuery.data) {
+    } else if (!thumbnailQuery.data) {
         return (
             <Center w={heightAndWidth.width} h={heightAndWidth.height}>
                 <Loader size={36} />
@@ -265,12 +278,15 @@ export function PreviewImage(props: PreviewImageProps): ReactNode {
                 h={heightAndWidth.height}
             >
                 <img
+                    // The render lands at the url the stand-in came from, so
+                    // remounting is what makes the browser go get it.
+                    key={String(thumbnailQuery.data.isFallback)}
                     src={thumbnailQuery.data.url}
                     {...heightAndWidth}
                     style={FIT_INSIDE_BOX}
                 />
             </Box>
-            {thumbnailQuery.data.isFallback && (
+            {isWaiting && (
                 <Loader pos="absolute" bottom={15} right={15} size={18} />
             )}
         </>

src/frontend/lib/query-keys.ts

@@ -9,24 +9,11 @@ export function accessDataQueryKey() {
     return ["access-data"];
 }
 
-/** Every configuration, whichever insertable and microversion. */
-export function configurationQueryMatchKey() {
-    return ["configuration"];
-}
-
-/** One insertable's configuration, whichever microversion is cached. */
-export function insertableConfigurationQueryMatchKey(insertableId: string) {
-    return ["configuration", insertableId];
-}
-
 export function configurationQueryKey(
     insertableId: string,
     microversionId: string
 ) {
-    return [
-        ...insertableConfigurationQueryMatchKey(insertableId),
-        microversionId
-    ];
+    return ["configuration", insertableId, microversionId];
 }
 
 export function unitInfoQueryKey(instancePath: InstancePath) {