@oneuptime/common 12.0.13 → 12.0.14

package/UI/Components/Skeleton/Skeleton.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * Width variants for skeleton lines. Cycled by index (never Math.random) so
+ * the shimmer is stable across re-renders - random widths re-roll on every
+ * render, which reads as flicker - and so tests can assert exact widths.
+ */
+const WIDTH_VARIANTS: Array<string> = ["w-3/4", "w-1/2", "w-2/3"];
+
+export type GetSkeletonWidthClassFunction = (index: number) => string;
+
+export const getSkeletonWidthClass: GetSkeletonWidthClassFunction = (
+  index: number,
+): string => {
+  return WIDTH_VARIANTS[Math.abs(index) % WIDTH_VARIANTS.length] as string;
+};
+
+export interface ComponentProps {
+  className?: string | undefined;
+  /*
+   * When set, a deterministic width variant (w-3/4 / w-1/2 / w-2/3, cycling)
+   * is appended so a stack of lines looks like ragged text instead of a
+   * uniform block. Leave undefined when className already sizes the block.
+   */
+  widthVariantIndex?: number | undefined;
+  dataTestId?: string | undefined;
+}
+
+/*
+ * A single pulsing placeholder block. Purely decorative - the wrapper that
+ * composes skeletons into a loading state owns the role="status" / sr-only
+ * announcement, so each block hides itself from the accessibility tree.
+ */
+const Skeleton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const widthClass: string =
+    props.widthVariantIndex === undefined
+      ? ""
+      : ` ${getSkeletonWidthClass(props.widthVariantIndex)}`;
+
+  return (
+    <div
+      data-testid={props.dataTestId || "skeleton"}
+      aria-hidden={true}
+      className={`animate-pulse rounded bg-gray-200${
+        props.className ? ` ${props.className}` : ""
+      }${widthClass}`}
+    ></div>
+  );
+};
+
+export default Skeleton;

package/UI/Components/Table/Table.tsx

@@ -7,7 +7,6 @@ import BulkUpdateForm, {
   BulkActionButtonSchema,
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FilterViewer from "../Filters/FilterViewer";
 import Filter from "../Filters/Types/Filter";
@@ -15,6 +14,7 @@ import FilterData from "../Filters/Types/FilterData";
 import Pagination from "../Pagination/Pagination";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
+import TableSkeletonRows from "./TableSkeletonRows";
 import Columns from "./Types/Columns";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import GenericObject from "../../../Types/GenericObject";
@@ -211,22 +211,34 @@ const Table: TableFunction = <T extends GenericObject>(
     colspan = 1;
   }
 
+  /*
+   * A refetch with rows already on screen (pagination, sort, refresh - the
+   * parent never clears `data` while fetching) keeps those rows visible and
+   * dims them instead of tearing the layout down to placeholders. Skeletons
+   * are only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    props.isLoading && props.data.length > 0;
+
   const getTablebody: GetReactElementFunction = (): ReactElement => {
-    if (props.isLoading) {
+    if (props.isLoading && props.data.length === 0) {
       return (
-        <tbody>
-          <tr>
-            <td colSpan={colspan}>
-              <div className="flex justify-center w-full">
-                <ComponentLoader />
-              </div>
-            </td>
-          </tr>
-        </tbody>
+        <TableSkeletonRows
+          columns={props.columns}
+          enableDragAndDrop={props.enableDragAndDrop}
+          isBulkActionsEnabled={isBulkActionsEnabled}
+          itemsOnPage={props.itemsOnPage}
+          isMobile={isMobile}
+        />
       );
     }
 
-    if (props.error) {
+    /*
+     * Loading still wins over error and empty (same priority as before the
+     * skeletons): while a refetch is in flight the stale rows render, never a
+     * stale error or a premature "no items".
+     */
+    if (!props.isLoading && props.error) {
       return (
         <tbody>
           <tr>
@@ -260,7 +272,7 @@ const Table: TableFunction = <T extends GenericObject>(
       );
     }
 
-    if (props.filterError) {
+    if (!props.isLoading && props.filterError) {
       return <></>;
     }
 
@@ -418,38 +430,56 @@ const Table: TableFunction = <T extends GenericObject>(
                   : "overflow-hidden border-t border-gray-200"
               }
             >
-              {isMobile ? (
-                // Mobile view: render as list
-                <div className="min-w-full divide-y divide-gray-200">
-                  {getTablebody()}
-                </div>
-              ) : (
-                // Desktop view: render as table
-                <table className="min-w-full divide-y divide-gray-200">
-                  <TableHeader
-                    id={`${props.id}-header`}
-                    columns={props.columns}
-                    onSortChanged={props.onSortChanged}
-                    enableDragAndDrop={props.enableDragAndDrop}
-                    sortBy={props.sortBy}
-                    sortOrder={props.sortOrder}
-                    isBulkActionsEnabled={isBulkActionsEnabled}
-                    onAllItemsDeselected={() => {
-                      setIsAllItemsSelected(false);
-                      props.onBulkClearAllItems?.();
-                    }}
-                    onAllItemsOnThePageSelected={() => {
-                      if (props.onBulkSelectItemsOnCurrentPage) {
-                        props.onBulkSelectItemsOnCurrentPage();
+              {/*
+               * Dims the stale rows (header included) while a refetch is in
+               * flight and blocks clicks on them - a sort or row action
+               * against data about to be replaced is a race. The wrapper
+               * sits OUTSIDE the <table> because a <div> cannot legally wrap
+               * a <tbody> inside one.
+               */}
+              <div
+                data-testid="table-content"
+                className={
+                  isRefetchingWithData
+                    ? "opacity-60 pointer-events-none transition-opacity duration-150"
+                    : "transition-opacity duration-150"
+                }
+              >
+                {isMobile ? (
+                  // Mobile view: render as list
+                  <div className="min-w-full divide-y divide-gray-200">
+                    {getTablebody()}
+                  </div>
+                ) : (
+                  // Desktop view: render as table
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <TableHeader
+                      id={`${props.id}-header`}
+                      columns={props.columns}
+                      onSortChanged={props.onSortChanged}
+                      enableDragAndDrop={props.enableDragAndDrop}
+                      sortBy={props.sortBy}
+                      sortOrder={props.sortOrder}
+                      isBulkActionsEnabled={isBulkActionsEnabled}
+                      onAllItemsDeselected={() => {
+                        setIsAllItemsSelected(false);
+                        props.onBulkClearAllItems?.();
+                      }}
+                      onAllItemsOnThePageSelected={() => {
+                        if (props.onBulkSelectItemsOnCurrentPage) {
+                          props.onBulkSelectItemsOnCurrentPage();
+                        }
+                      }}
+                      isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
+                      isSomeItemsOnThePageSelected={
+                        isSomeItemsOnThePageSelected
                       }
-                    }}
-                    isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
-                    isSomeItemsOnThePageSelected={isSomeItemsOnThePageSelected}
-                    hasTableItems={selectableRowsOnThePage.length > 0}
-                  />
-                  {getTablebody()}
-                </table>
-              )}
+                      hasTableItems={selectableRowsOnThePage.length > 0}
+                    />
+                    {getTablebody()}
+                  </table>
+                )}
+              </div>
             </div>
           </div>
         </div>

package/UI/Components/Table/TableSkeletonRows.tsx

@@ -0,0 +1,141 @@
+import Skeleton from "../Skeleton/Skeleton";
+import Column from "./Types/Column";
+import Columns from "./Types/Columns";
+import GenericObject from "../../../Types/GenericObject";
+import React, { ReactElement } from "react";
+
+export interface ComponentProps<T extends GenericObject> {
+  columns: Columns<T>;
+  /*
+   * The same feature flags TableHeader renders leading cells for. The
+   * skeleton must mirror them exactly or its cells sit misaligned under the
+   * header while loading.
+   */
+  enableDragAndDrop?: undefined | boolean;
+  isBulkActionsEnabled?: undefined | boolean;
+  itemsOnPage: number;
+  /*
+   * Mobile renders card-shaped placeholders inside the table's mobile <div>
+   * wrapper - <tbody> markup is invalid there - and drops hideOnMobile
+   * columns, same as TableHeader and TableRow do.
+   */
+  isMobile: boolean;
+}
+
+type TableSkeletonRowsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+/*
+ * Layout-preserving placeholder rows for the table's first load: one pulsing
+ * cell per visible column (plus the drag-handle / bulk-select extras) so the
+ * page keeps the table's shape instead of collapsing to a centered spinner.
+ */
+const TableSkeletonRows: TableSkeletonRowsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  // Enough rows to look like a page of data without painting offscreen ones.
+  const rowCount: number = Math.max(1, Math.min(props.itemsOnPage || 0, 10));
+  const rowIndexes: Array<number> = Array.from(Array(rowCount).keys());
+
+  // Same filter as TableHeader / TableRow so cell counts always agree.
+  const visibleColumns: Columns<T> = props.columns.filter(
+    (column: Column<T>) => {
+      return !(column.hideOnMobile && props.isMobile);
+    },
+  );
+
+  if (props.isMobile) {
+    return (
+      <div
+        data-testid="table-skeleton-loader"
+        role="status"
+        aria-live="polite"
+        className="divide-y divide-gray-200 bg-white"
+      >
+        <span className="sr-only">Loading...</span>
+        {rowIndexes.map((rowIndex: number) => {
+          return (
+            <div
+              key={rowIndex}
+              className="p-4 bg-white border-b border-gray-200"
+            >
+              <div className="space-y-3">
+                {visibleColumns.map(
+                  (_column: Column<T>, columnIndex: number) => {
+                    return (
+                      <div
+                        key={columnIndex}
+                        className="flex flex-col space-y-1"
+                      >
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton
+                          className="h-4"
+                          widthVariantIndex={rowIndex + columnIndex}
+                        />
+                      </div>
+                    );
+                  },
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <tbody
+      data-testid="table-skeleton-loader"
+      role="status"
+      aria-live="polite"
+      className="divide-y divide-gray-200 bg-white"
+    >
+      {rowIndexes.map((rowIndex: number) => {
+        return (
+          <tr key={rowIndex}>
+            {props.enableDragAndDrop && (
+              <td className="ml-5 py-4 w-10 align-top">
+                <Skeleton className="ml-6 h-5 w-5" />
+              </td>
+            )}
+            {props.isBulkActionsEnabled && (
+              <td className="w-10 py-3.5  align-top">
+                <div className="ml-5">
+                  <Skeleton className="h-4 w-4" />
+                </div>
+              </td>
+            )}
+            {visibleColumns.map((_column: Column<T>, columnIndex: number) => {
+              /*
+               * Cell classes copied from TableRow's real cells so the
+               * skeleton's rhythm and padding match the rows that replace it.
+               */
+              let className: string =
+                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              if (columnIndex === visibleColumns.length - 1) {
+                className =
+                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              }
+
+              return (
+                <td key={columnIndex} className={className}>
+                  {rowIndex === 0 && columnIndex === 0 && (
+                    <span className="sr-only">Loading...</span>
+                  )}
+                  <Skeleton
+                    className="h-4"
+                    widthVariantIndex={rowIndex + columnIndex}
+                  />
+                </td>
+              );
+            })}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+export default TableSkeletonRows;

package/UI/Components/Tabs/Tab.tsx

@@ -31,7 +31,7 @@ const TabElement: FunctionComponent<ComponentProps> = (
   const backgroundColor: string = "bg-gray-100";
 
   const baseClasses: string =
-    "rounded-md px-3 py-2 text-sm font-medium cursor-pointer inline-flex whitespace-nowrap flex-shrink-0";
+    "rounded-md px-3 py-2 text-sm font-medium cursor-pointer inline-flex whitespace-nowrap flex-shrink-0 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2";
   const stateClasses: string = props.isSelected
     ? `${backgroundColor} text-gray-700`
     : "text-gray-500 hover:text-gray-700";

package/UI/Components/Toast/Toast.tsx

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
@@ -17,14 +23,78 @@ export interface ComponentProps {
   onClose?: undefined | (() => void);
   type?: undefined | ToastType;
   icon?: IconProp | undefined;
-  index?: undefined | number;
 }
 
+/* How long the exit fade runs before the toast actually unmounts. */
+const EXIT_DURATION_IN_MS: number = 150;
+
 const Component: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateString } = useTranslateValue();
   const [show, setShow] = useState<boolean>(true);
+
+  /*
+   * The toast is mounted in its closed state (faded, nudged down) and flipped
+   * open one frame later so the browser has something to transition from —
+   * the same pattern Modal uses for its entrance.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  /*
+   * Dismissal fades the card out first and only unmounts (and notifies the
+   * owner) once the fade has finished, so the toast never blinks away.
+   */
+  const [isLeaving, setIsLeaving] = useState<boolean>(false);
+
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(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 toast at zero opacity.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
+  /*
+   * The latest onClose lives in a ref so the exit effect can depend on
+   * isLeaving alone. Owners may recreate onClose every render, and a dep on
+   * it would restart the unmount timer whenever a sibling toast re-renders
+   * the stack mid-exit — leaving an invisible pointer-events-auto card
+   * intercepting clicks past its original deadline.
+   */
+  const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
+    (() => void) | undefined
+  >(props.onClose);
+  onCloseRef.current = props.onClose;
+
+  useEffect(() => {
+    if (!isLeaving) {
+      return undefined;
+    }
+
+    const exitTimer: ReturnType<typeof setTimeout> = setTimeout(() => {
+      setShow(false);
+      if (onCloseRef.current) {
+        onCloseRef.current();
+      }
+    }, EXIT_DURATION_IN_MS);
+
+    return () => {
+      clearTimeout(exitTimer);
+    };
+  }, [isLeaving]);
+
   let typeCssClass: string = "text-gray-400";
   let iconType: IconProp = IconProp.Info;
 
@@ -53,65 +123,60 @@ const Component: FunctionComponent<ComponentProps> = (
     iconType = props.icon;
   }
 
-  let top: number = 0;
+  /*
+   * Settled state carries no transform class at all — leaving a translate on
+   * the card would make it the containing block for position:fixed
+   * descendants (the Modal invariant).
+   */
+  let motionClassName: string = "translate-y-2 opacity-0";
 
-  if (props.index) {
-    top = props.index * 16; // move the second item lower than the first one. 16 is the height of the toast.
+  if (isLeaving) {
+    motionClassName = "opacity-0";
+  } else if (hasEntered) {
+    motionClassName = "opacity-100";
   }
 
   if (show) {
     return (
       <div
         data-testid="toast"
-        aria-live="assertive"
-        className={`pointer-events-none fixed z-40 top-${top} left-0 right-0  flex items-end px-4 py-6 sm:items-start sm:p-6`}
+        className={`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition duration-150 ease-out motion-reduce:transition-none ${motionClassName}`}
       >
-        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
-          <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-            <div className="p-4">
-              <div className="flex items-start">
-                <div className="flex-shrink-0">
-                  <Icon
-                    className={`h-6 w-6 ${typeCssClass}`}
-                    data-testid="toast-icon"
-                    icon={iconType}
-                  />
-                </div>
-                <div className="ml-3 w-0 flex-1 pt-0.5">
-                  <p
-                    data-testid="title"
-                    className="text-sm font-medium text-gray-900"
-                  >
-                    {translateString(props.title)}
-                  </p>
-                  <p
-                    data-testid="description"
-                    className="mt-1 text-sm text-gray-500"
-                  >
-                    {translateString(props.description)}
-                  </p>
-                  {/* <div className="mt-3 flex space-x-7">
-                    <button type="button" className="rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Undo</button>
-                    <button type="button" className="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Dismiss</button>
-                  </div> */}
-                </div>
-                <div className="ml-4 flex flex-shrink-0">
-                  <button
-                    onClick={() => {
-                      setShow(false);
-                      if (props.onClose) {
-                        props.onClose();
-                      }
-                    }}
-                    data-testid="close-button"
-                    type="button"
-                    className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  >
-                    <span className="sr-only">Close</span>
-                    <Icon className={`h-5 w-5`} icon={IconProp.Close} />
-                  </button>
-                </div>
-              </div>
+        <div className="p-4">
+          <div className="flex items-start">
+            <div className="flex-shrink-0">
+              <Icon
+                className={`h-6 w-6 ${typeCssClass}`}
+                data-testid="toast-icon"
+                icon={iconType}
+              />
+            </div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p
+                data-testid="title"
+                className="text-sm font-medium text-gray-900"
+              >
+                {translateString(props.title)}
+              </p>
+              <p
+                data-testid="description"
+                className="mt-1 text-sm text-gray-500"
+              >
+                {translateString(props.description)}
+              </p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={() => {
+                  setIsLeaving(true);
+                }}
+                data-testid="close-button"
+                type="button"
+                className="inline-flex rounded-md bg-white text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                <span className="sr-only">Close</span>
+                <Icon className={`h-5 w-5`} icon={IconProp.Close} />
+              </button>
             </div>
           </div>
         </div>