@revisium/schema-toolkit-ui 0.6.12 → 0.6.13

package/dist/index.cjs

@@ -14233,6 +14233,45 @@ var MockDataSource = class {
 	}
 };
 
+//#endregion
+//#region src/hooks/useDelayedVisibility.ts
+/**
+* Controls visibility with a show delay and minimum display time.
+*
+* - If `active` becomes false before `delayMs` elapses → never shown.
+* - If shown, stays visible for at least `minShowMs` after `active` becomes false.
+*/
+function useDelayedVisibility(active, { delayMs = 150, minShowMs = 300 } = {}) {
+	const [visible, setVisible] = (0, react.useState)(false);
+	const shownAt = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (active) {
+			const timer = setTimeout(() => {
+				shownAt.current = Date.now();
+				setVisible(true);
+			}, delayMs);
+			return () => clearTimeout(timer);
+		}
+		if (shownAt.current !== null) {
+			const remaining = minShowMs - (Date.now() - shownAt.current);
+			if (remaining > 0) {
+				const timer = setTimeout(() => {
+					shownAt.current = null;
+					setVisible(false);
+				}, remaining);
+				return () => clearTimeout(timer);
+			}
+			shownAt.current = null;
+		}
+		setVisible(false);
+	}, [
+		active,
+		delayMs,
+		minShowMs
+	]);
+	return visible;
+}
+
 //#endregion
 //#region src/table-editor/Status/ui/CellInfoWidget.tsx
 const CellInfoWidget = (0, mobx_react_lite.observer)(({ model }) => {
@@ -14375,17 +14414,178 @@ const ViewSettingsBadge = (0, mobx_react_lite.observer)(({ model }) => {
 	});
 });
 
+//#endregion
+//#region src/table-editor/TableEditor/ui/TableEditorSkeleton.tsx
+const HEADER_ROW_HEIGHT = 40;
+const DATA_ROW_HEIGHT = 40;
+const SKELETON_ROW_COUNT = 8;
+const COLUMN_WIDTHS = [
+	120,
+	150,
+	120,
+	100,
+	130
+];
+const CONTENT_WIDTHS = [
+	[
+		80,
+		110,
+		70,
+		60,
+		90
+	],
+	[
+		100,
+		90,
+		100,
+		80,
+		110
+	],
+	[
+		60,
+		130,
+		80,
+		70,
+		80
+	],
+	[
+		90,
+		100,
+		60,
+		90,
+		100
+	],
+	[
+		75,
+		120,
+		90,
+		55,
+		70
+	],
+	[
+		110,
+		80,
+		75,
+		80,
+		120
+	],
+	[
+		85,
+		140,
+		95,
+		65,
+		95
+	],
+	[
+		95,
+		70,
+		110,
+		85,
+		80
+	]
+];
+const TableEditorSkeleton = ({ breadcrumbs, onBreadcrumbClick, showCreateButton, useWindowScroll }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Box, {
+	display: "flex",
+	flexDirection: "column",
+	height: useWindowScroll ? void 0 : "100%",
+	flex: useWindowScroll ? 1 : void 0,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+		px: 3,
+		pt: "32px",
+		pb: "48px",
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		...useWindowScroll && {
+			position: "sticky",
+			top: 0,
+			zIndex: 3,
+			bg: "white"
+		},
+		children: [breadcrumbs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Breadcrumbs, {
+			segments: breadcrumbs,
+			highlightLast: false,
+			onSegmentClick: onBreadcrumbClick,
+			action: showCreateButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+				height: "32px",
+				width: "32px",
+				borderRadius: "6px"
+			}) : void 0
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Flex, {
+			alignItems: "center",
+			gap: "8px",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+					height: "32px",
+					width: "32px",
+					borderRadius: "6px"
+				})
+			]
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Box, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+		height: `${HEADER_ROW_HEIGHT}px`,
+		alignItems: "center",
+		px: 3,
+		borderBottom: "1px solid",
+		borderColor: "gray.100",
+		children: COLUMN_WIDTHS.map((colWidth, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
+			width: `${colWidth}px`,
+			flexShrink: 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+				height: "12px",
+				width: "60px",
+				borderRadius: "4px"
+			})
+		}, `h-${j}`))
+	}), CONTENT_WIDTHS.slice(0, SKELETON_ROW_COUNT).map((contentWidths, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Flex, {
+		height: `${DATA_ROW_HEIGHT}px`,
+		alignItems: "center",
+		px: 3,
+		borderBottom: "1px solid",
+		borderColor: "gray.100",
+		children: COLUMN_WIDTHS.map((colWidth, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
+			width: `${colWidth}px`,
+			flexShrink: 0,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Skeleton, {
+				height: "14px",
+				width: `${contentWidths[j]}px`,
+				borderRadius: "4px"
+			})
+		}, `r-${i}-c-${j}`))
+	}, `r-${i}`))] })]
+});
+
 //#endregion
 //#region src/table-editor/TableEditor/ui/TableEditor.tsx
 const noop = () => {};
+function getWriteCallbacks(isReadonly, viewModel, callbacks) {
+	return {
+		onDeleteRow: isReadonly ? void 0 : (id) => viewModel.deleteRows([id]),
+		onDuplicateRow: isReadonly ? void 0 : callbacks.onDuplicateRow,
+		onDeleteSelected: isReadonly ? void 0 : (ids) => viewModel.deleteRows(ids),
+		onUploadFile: isReadonly ? void 0 : callbacks.onUploadFile
+	};
+}
 const TableEditor = (0, mobx_react_lite.observer)(({ viewModel, useWindowScroll }) => {
-	if (viewModel.isBootstrapping) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		height: "100%",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Spinner, {})
-	});
+	const showSkeleton = useDelayedVisibility(viewModel.isBootstrapping);
+	if (viewModel.isBootstrapping) {
+		if (!showSkeleton) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableEditorSkeleton, {
+			breadcrumbs: viewModel.breadcrumbs,
+			onBreadcrumbClick: viewModel.callbacks.onBreadcrumbClick,
+			showCreateButton: !viewModel.readonly && !!viewModel.callbacks.onCreateRow,
+			useWindowScroll
+		});
+	}
 	const isReadonly = viewModel.readonly;
 	const { breadcrumbs, callbacks } = viewModel;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Box, {
@@ -14446,11 +14646,8 @@ const TableEditor = (0, mobx_react_lite.observer)(({ viewModel, useWindowScroll
 					onEndReached: viewModel.loadMore,
 					onOpenRow: callbacks.onOpenRow,
 					onPickRow: callbacks.onPickRow,
-					onDeleteRow: isReadonly ? void 0 : (id) => viewModel.deleteRows([id]),
-					onDuplicateRow: isReadonly ? void 0 : callbacks.onDuplicateRow,
-					onDeleteSelected: isReadonly ? void 0 : (ids) => viewModel.deleteRows(ids),
+					...getWriteCallbacks(isReadonly, viewModel, callbacks),
 					onSearchForeignKey: callbacks.onSearchForeignKey,
-					onUploadFile: isReadonly ? void 0 : callbacks.onUploadFile,
 					onOpenFile: callbacks.onOpenFile,
 					onCopyPath: callbacks.onCopyPath,
 					useWindowScroll
@@ -14577,6 +14774,7 @@ exports.operatorRequiresValue = operatorRequiresValue;
 exports.selectDefaultColumns = selectDefaultColumns;
 exports.typeMenuGroups = typeMenuGroups;
 exports.useContentEditable = useContentEditable;
+exports.useDelayedVisibility = useDelayedVisibility;
 Object.keys(_revisium_schema_toolkit).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,