@oneuptime/common 12.0.13 → 12.0.15

package/UI/Components/Forms/BasicModelForm.tsx

@@ -8,6 +8,7 @@ import BasicForm, {
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
 import FormValues from "./Types/FormValues";
+import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import React, {
   MutableRefObject,
@@ -113,7 +114,7 @@ const BasicModelForm: <TBaseModel extends BaseModel>(
       onValidate={props.onValidate ? props.onValidate : DefaultValidateFunction}
       disableAutofocus={props.disableAutofocus}
       steps={props.steps}
-      name={props.name}
+      name={FormAnalyticsName.resolve(props.name, props.title)}
       onFormStepChange={props.onFormStepChange}
       submitButtonStyleType={props.submitButtonStyleType}
       onSubmit={props.onSubmit}

package/UI/Components/Forms/ModelForm.tsx

@@ -21,6 +21,7 @@ import Field from "./Types/Field";
 import Fields from "./Types/Fields";
 import { FormStep } from "./Types/FormStep";
 import FormValues from "./Types/FormValues";
+import FormAnalyticsName from "./Utils/FormAnalyticsName";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import AccessControlModel from "../../../Models/DatabaseModels/DatabaseBaseModel/AccessControlModel";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
@@ -854,7 +855,15 @@ const ModelForm: <TBaseModel extends BaseModel>(
         disableAutofocus={props.disableAutofocus}
         model={model}
         id={props.id}
-        name={props.name}
+        name={FormAnalyticsName.resolve(
+          props.name,
+          props.title,
+          model.singularName
+            ? `${
+                props.formType === FormType.Create ? "Create" : "Update"
+              } ${model.singularName}`
+            : undefined,
+        )}
         onFormStepChange={props.onFormStepChange}
         onIsLastFormStep={props.onIsLastFormStep}
         fields={fields}

package/UI/Components/Forms/Utils/FormAnalyticsName.ts

@@ -0,0 +1,39 @@
+/*
+ * Matches "undefined" / "null" as a whole word, which is what a missing value
+ * turns into once it is interpolated into a title (`Duplicate ${undefined}`).
+ * Case sensitive on purpose: titles are written in Title Case, so a real word
+ * like "Null" in a form title is left alone.
+ */
+const STRINGIFIED_EMPTY_VALUE: RegExp = /\b(undefined|null)\b/;
+
+/*
+ * Resolves the human readable name that identifies a form in the
+ * "FORM SUBMIT" analytics event.
+ *
+ * Wrappers around BasicForm pass a chain of candidates - the explicit name
+ * first, then whatever title they already render - and the first usable one
+ * wins. When no candidate is usable the caller is expected to skip the capture
+ * altogether, because an event named after a missing value collapses distinct
+ * conversions into one indistinguishable event.
+ */
+export default class FormAnalyticsName {
+  public static resolve(
+    ...candidates: Array<string | undefined | null>
+  ): string | undefined {
+    for (const candidate of candidates) {
+      if (typeof candidate !== "string") {
+        continue;
+      }
+
+      const name: string = candidate.trim();
+
+      if (!name || STRINGIFIED_EMPTY_VALUE.test(name)) {
+        continue;
+      }
+
+      return name;
+    }
+
+    return undefined;
+  }
+}

package/UI/Components/List/List.tsx

@@ -1,6 +1,5 @@
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Field from "../Detail/Field";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FilterViewer from "../Filters/FilterViewer";
@@ -8,6 +7,7 @@ import FilterType from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
 import Pagination from "../Pagination/Pagination";
 import ListBody from "./ListBody";
+import ListSkeleton from "./ListSkeleton";
 import { ListDetailProps } from "./ListRow";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement } from "react";
@@ -67,12 +67,30 @@ type ListFunction = <T extends GenericObject>(
 const List: ListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  /*
+   * A refetch with cards already on screen (pagination, sort, refresh - the
+   * parent never clears `data` while fetching) keeps those cards visible and
+   * dims them; skeletons are only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    props.isLoading && props.data.length > 0;
+
   const getListbody: GetReactElementFunction = (): ReactElement => {
-    if (props.isLoading) {
-      return <ComponentLoader />;
+    if (props.isLoading && props.data.length === 0) {
+      return (
+        <ListSkeleton
+          fieldsCount={props.fields.length}
+          itemsOnPage={props.itemsOnPage}
+        />
+      );
     }
 
-    if (props.error) {
+    /*
+     * Loading still wins over error and empty (same priority as before the
+     * skeletons): while a refetch is in flight the stale cards render, never
+     * a stale error or a premature "no items".
+     */
+    if (!props.isLoading && props.error) {
       return (
         <div className="p-6">
           <ErrorMessage
@@ -145,7 +163,21 @@ const List: ListFunction = <T extends GenericObject>(
               }
             }}
           >
-            {getListbody()}
+            {/*
+             * Dims the stale cards while a refetch is in flight and blocks
+             * clicks on them - actions against data about to be replaced
+             * are a race.
+             */}
+            <div
+              data-testid="list-content"
+              className={
+                isRefetchingWithData
+                  ? "opacity-60 pointer-events-none transition-opacity duration-150"
+                  : "transition-opacity duration-150"
+              }
+            >
+              {getListbody()}
+            </div>
           </DragDropContext>
           {!props.disablePagination && (
             <div className="mt-5 -mb-6">

package/UI/Components/List/ListSkeleton.tsx

@@ -0,0 +1,54 @@
+import Skeleton from "../Skeleton/Skeleton";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  /*
+   * One placeholder line per field the real ListRow will render, so the
+   * cards are the right height before the data arrives.
+   */
+  fieldsCount: number;
+  itemsOnPage: number;
+}
+
+/*
+ * Card-shaped placeholders for the list's first load, matching ListBody's
+ * wrapper (space-y-6 p-6 border-t) so nothing shifts when real rows land.
+ */
+const ListSkeleton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  // Enough cards to look like a page without painting offscreen ones.
+  const cardCount: number = Math.max(1, Math.min(props.itemsOnPage || 0, 6));
+  const cardIndexes: Array<number> = Array.from(Array(cardCount).keys());
+  const lineIndexes: Array<number> = Array.from(
+    Array(Math.max(1, props.fieldsCount)).keys(),
+  );
+
+  return (
+    <div
+      data-testid="list-skeleton-loader"
+      role="status"
+      aria-live="polite"
+      className="space-y-6 p-6 border-t border-gray-200"
+    >
+      <span className="sr-only">Loading...</span>
+      {cardIndexes.map((cardIndex: number) => {
+        return (
+          <div key={cardIndex} className="space-y-3">
+            {lineIndexes.map((lineIndex: number) => {
+              return (
+                <Skeleton
+                  key={lineIndex}
+                  className="h-4"
+                  widthVariantIndex={cardIndex + lineIndex}
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/UI/Components/Markdown.tsx/LazyMarkdownViewer.tsx

@@ -1,4 +1,9 @@
-import { ComponentProps } from "./MarkdownViewer";
+/*
+ * Type-only on purpose: the sole static edge to MarkdownViewer must be
+ * erasable, so the viewer (and the mermaid chunk it lazily pulls) stays out
+ * of every eager bundle that imports this wrapper.
+ */
+import type { ComponentProps } from "./MarkdownViewer";
 import React, {
   FunctionComponent,
   LazyExoticComponent,

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -76,7 +76,6 @@ SyntaxHighlighter.registerLanguage("ruby", ruby);
 SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
-import mermaid from "mermaid";
 import DOMPurify from "dompurify";
 import OneUptimeDate from "../../../Types/Date";
 import { Theme, useTheme } from "../../Utils/Theme";
@@ -90,7 +89,48 @@ import { Theme, useTheme } from "../../Utils/Theme";
 const ISO_8601_REGEX: RegExp =
   /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
-const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
+/*
+ * mermaid's pre-bundled build is ~4.5MB — by far the heaviest dependency of
+ * this component — so it is loaded on demand the first time a mermaid fence
+ * actually renders. Plain markdown (the overwhelmingly common case) never
+ * pays for it: there is no static import and no module-scope initialization.
+ * The promise is cached module-wide so multiple diagrams share one load, and
+ * theme setup runs only after the load resolves.
+ */
+type MermaidApi = typeof import("mermaid").default;
+
+let mermaidLoadPromise: Promise<MermaidApi> | null = null;
+
+const loadMermaid: () => Promise<MermaidApi> = (): Promise<MermaidApi> => {
+  if (!mermaidLoadPromise) {
+    const loadPromise: Promise<MermaidApi> = import("mermaid").then(
+      (mermaidModule: { default: MermaidApi }): MermaidApi => {
+        return mermaidModule.default;
+      },
+    );
+
+    mermaidLoadPromise = loadPromise;
+
+    /*
+     * A failed chunk load (flaky network, deploy rotating hashed chunk
+     * names) must not be cached forever — clear the slot so the next
+     * diagram retries the import. The reset rides a side branch of the
+     * promise: the original is still returned below, so the caller that
+     * triggered this load sees the rejection through its own error path.
+     */
+    loadPromise.catch((): void => {
+      if (mermaidLoadPromise === loadPromise) {
+        mermaidLoadPromise = null;
+      }
+    });
+  }
+  return mermaidLoadPromise;
+};
+
+const initializeMermaid: (mermaid: MermaidApi, theme: Theme) => void = (
+  mermaid: MermaidApi,
+  theme: Theme,
+): void => {
   const isDark: boolean = theme === Theme.Dark;
 
   mermaid.initialize({
@@ -120,10 +160,8 @@ const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
   });
 };
 
-initializeMermaid(Theme.Light);
-
-// Mermaid diagram component
-const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
+// Mermaid diagram component (exported so tests can exercise the lazy load directly)
+export const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
   chart,
 }: {
   chart: string;
@@ -136,27 +174,34 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
     let isCancelled: boolean = false;
 
     const renderDiagram: () => Promise<void> = async (): Promise<void> => {
-      if (containerRef.current) {
+      try {
+        /*
+         * Dynamic load first; a failed chunk load surfaces through the same
+         * error path as a failed render. Theme setup MUST follow the load —
+         * there is deliberately no module-scope initialization any more.
+         */
+        const mermaid: MermaidApi = await loadMermaid();
+        if (!containerRef.current || isCancelled) {
+          return;
+        }
         containerRef.current.innerHTML = "";
-        try {
-          initializeMermaid(theme);
-          const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-          const { svg } = await mermaid.render(id, chart);
-          if (containerRef.current && !isCancelled) {
-            containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
-              USE_PROFILES: { svg: true, svgFilters: true },
-              ADD_TAGS: ["foreignObject"],
-            });
-          }
-        } catch (error) {
-          if (containerRef.current && !isCancelled) {
-            const errorMessage: string = String(error);
-            const errorEl: HTMLPreElement = document.createElement("pre");
-            errorEl.className = "text-red-500";
-            errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
-            containerRef.current.innerHTML = "";
-            containerRef.current.appendChild(errorEl);
-          }
+        initializeMermaid(mermaid, theme);
+        const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, chart);
+        if (containerRef.current && !isCancelled) {
+          containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
+            USE_PROFILES: { svg: true, svgFilters: true },
+            ADD_TAGS: ["foreignObject"],
+          });
+        }
+      } catch (error) {
+        if (containerRef.current && !isCancelled) {
+          const errorMessage: string = String(error);
+          const errorEl: HTMLPreElement = document.createElement("pre");
+          errorEl.className = "text-red-500";
+          errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
+          containerRef.current.innerHTML = "";
+          containerRef.current.appendChild(errorEl);
         }
       }
     };

package/UI/Components/Modal/Modal.tsx

@@ -413,7 +413,7 @@ const Modal: FunctionComponent<ComponentProps> = (
   return (
     <div className="relative z-50">
       <div
-        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-150 ease-out motion-reduce:transition-none ${
           hasEntered ? "opacity-100" : "opacity-0"
         }`}
         data-testid="modal-backdrop"
@@ -429,7 +429,7 @@ const Modal: FunctionComponent<ComponentProps> = (
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
             ref={modalRef}
-            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-200 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
+            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-150 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
             data-testid="modal"
             aria-labelledby={titleId}
             aria-describedby={translatedDescription ? descriptionId : undefined}

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -7,6 +7,7 @@ import ModelForm, {
   ComponentProps as ModelFormComponentProps,
 } from "../Forms/ModelForm";
 import FormValues from "../Forms/Types/FormValues";
+import FormAnalyticsName from "../Forms/Utils/FormAnalyticsName";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import { JSONObject } from "../../../Types/JSON";
@@ -77,7 +78,11 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
         <>
           <ModelForm<TBaseModel>
             {...props.formProps}
-            name={props.name}
+            name={FormAnalyticsName.resolve(
+              props.name,
+              props.formProps.name,
+              props.title,
+            )}
             modelAPI={props.modelAPI}
             modelType={props.modelType}
             onIsLastFormStep={(isLastFormStep: boolean) => {

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -47,7 +47,7 @@ import List from "../List/List";
 import { ListDetailProps } from "../List/ListRow";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Modal, { ModalWidth } from "../Modal/Modal";
-import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import Icon from "../Icon/Icon";
 import Filter from "../ModelFilter/Filter";
 import { DropdownOption, DropdownOptionLabel } from "../Dropdown/Dropdown";

package/UI/Components/ModelTable/useCustomFieldColumns.ts

@@ -4,7 +4,7 @@ import {
   getCustomFieldColumns,
   getCustomFieldDefinitions,
 } from "./CustomFieldColumns";
-import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import ModelListCache from "../../Utils/ModelListCache";
 import ProjectUtil from "../../Utils/Project";
 import { Logger } from "../../Utils/Logger";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
@@ -96,8 +96,14 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
       setError("");
 
       try {
-        const result: ListResult<BaseModel> = await ModelAPI.getList<BaseModel>(
-          {
+        /*
+         * Through ModelListCache rather than ModelAPI: a table mounts two
+         * instances of this hook (the facet bar and the column set), and both
+         * want the same definition list - the cache turns that into one
+         * request, shared for the next minute.
+         */
+        const result: ListResult<BaseModel> =
+          await ModelListCache.getList<BaseModel>({
             modelType: customFieldsModelType,
             query: {
               projectId: projectId,
@@ -113,8 +119,8 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
             sort: {},
-          },
-        );
+            projectId: projectId,
+          });
 
         if (isCancelled) {
           return;

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -114,6 +114,13 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
     const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
 
+    /*
+     * The menu is mounted in its closed state (faded, slightly shrunk towards
+     * origin-top-right) and flipped open one frame later so the browser has
+     * something to transition from — the same pattern Modal uses.
+     */
+    const [hasMenuEntered, setHasMenuEntered] = useState<boolean>(false);
+
     useEffect(() => {
       setDropdownVisible(isComponentVisible);
       if (isComponentVisible) {
@@ -123,6 +130,30 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [isComponentVisible]);
 
+    useEffect(() => {
+      if (!isComponentVisible) {
+        setHasMenuEntered(false);
+        return undefined;
+      }
+
+      const open: () => void = (): void => {
+        setHasMenuEntered(true);
+      };
+
+      const frame: number = requestAnimationFrame(open);
+
+      /*
+       * A hidden or throttled tab never runs an animation frame; the timer
+       * skips the transition rather than leaving the menu at zero opacity.
+       */
+      const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+      return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(fallbackTimer);
+      };
+    }, [isComponentVisible]);
+
     useEffect(() => {
       if (props.isDisabled && isComponentVisible) {
         setIsComponentVisible(false);
@@ -427,7 +458,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
           <div
             ref={ref}
             id={menuId}
-            className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1"
+            /*
+             * Once settled the menu carries no transform class at all: a
+             * lingering scale would make it the containing block for any
+             * position:fixed descendant (the Modal invariant).
+             */
+            className={`absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
+              hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"
+            }`}
             role="menu"
             aria-orientation="vertical"
             aria-labelledby={buttonId}

package/UI/Components/Navbar/NavBar.tsx

@@ -65,6 +65,14 @@ export interface ComponentProps {
     description: string;
     link: URL;
   };
+  /*
+   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
+   * products menu is not registered — for apps where another surface (e.g. a
+   * command palette) owns that shortcut. The menu itself stays fully usable
+   * via its trigger button. Defaults to false: existing consumers keep the
+   * shortcut.
+   */
+  disableCommandKShortcut?: boolean | undefined;
   className?: string;
   // Legacy support for children-based usage
   children?: ReactElement | Array<ReactElement>;
@@ -165,6 +173,11 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
+    if (props.disableCommandKShortcut) {
+      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+      return;
+    }
+
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
@@ -180,7 +193,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, []);
+  }, [props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -1,8 +1,8 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Item from "./Item";
+import Skeleton from "../Skeleton/Skeleton";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement } from "react";
@@ -33,11 +33,49 @@ type OrderedStatesListFunction = <T extends GenericObject>(
 const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  if (props.isLoading) {
-    return <ComponentLoader />;
+  /*
+   * A refetch with states already on screen keeps them visible and dims
+   * them; the skeleton stack is only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    Boolean(props.isLoading) && props.data.length > 0;
+
+  if (props.isLoading && props.data.length === 0) {
+    /*
+     * Three card-shaped placeholders where the ordered state cards will
+     * land (matching Item's rounded bordered card), so the page keeps its
+     * shape instead of collapsing to a centered spinner.
+     */
+    return (
+      <div
+        data-testid="ordered-states-list-skeleton-loader"
+        role="status"
+        aria-live="polite"
+        className="m-32 text-center"
+      >
+        <span className="sr-only">Loading...</span>
+        {[0, 1, 2].map((index: number) => {
+          return (
+            <div key={index} className="w-fit m-auto">
+              <Skeleton className="h-32 w-64 rounded p-10" />
+              {index < 2 && (
+                <div className="items-center m-10">
+                  <Skeleton className="m-auto h-5 w-5" />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
-  if (props.error) {
+  /*
+   * Loading still wins over error and empty (same priority as before the
+   * skeletons): while a refetch is in flight the stale states render, never
+   * a stale error or a premature "no items".
+   */
+  if (!props.isLoading && props.error) {
     return (
       <ErrorMessage
         message={props.error}
@@ -82,7 +120,14 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   }
 
   return (
-    <div className="m-32 text-center">
+    <div
+      data-testid="ordered-states-list-content"
+      className={`m-32 text-center${
+        isRefetchingWithData
+          ? " opacity-60 pointer-events-none transition-opacity duration-150"
+          : " transition-opacity duration-150"
+      }`}
+    >
       {props.error && <p>{props.error}</p>}
       {!props.error &&
         props.data &&

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -7,7 +7,14 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import Link from "../../../Types/Link";
-import React, { ReactElement, useEffect, useState, useCallback } from "react";
+import React, {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
 import GlobalEvents from "../../Utils/GlobalEvents";
 
 export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
@@ -70,7 +77,39 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
       props.onCountFetchInit,
     ]);
 
+  /*
+   * Side menus rebuild `countQuery` / `requestOptions` as fresh object
+   * literals on every render, so their identity changes on every parent
+   * re-render (which happens on every in-section navigation). Guard the fetch
+   * with a value-level compare - the same JSON.stringify-in-a-ref pattern
+   * BaseModelTable uses for its `props.query` - so only a real change
+   * re-issues the count request. The global refresh event below still forces
+   * a refetch regardless of this guard.
+   */
+  const lastFetchedModelTypeRef: MutableRefObject<
+    { new (): TBaseModel } | undefined
+  > = useRef<{ new (): TBaseModel } | undefined>(undefined);
+  const lastFetchedQueryJsonRef: MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
   useEffect(() => {
+    const queryJson: string = JSON.stringify({
+      countQuery: props.countQuery || null,
+      requestOptions: props.requestOptions || null,
+    });
+
+    // only fetch if the query has changed by value (or on first mount).
+    if (
+      lastFetchedModelTypeRef.current === props.modelType &&
+      lastFetchedQueryJsonRef.current === queryJson
+    ) {
+      return;
+    }
+
+    lastFetchedModelTypeRef.current = props.modelType;
+    lastFetchedQueryJsonRef.current = queryJson;
+
     fetchCount().catch((err: Error) => {
       setError(API.getFriendlyMessage(err));
     });