@suspensive/react/dist/Delay.mjs

Suspensive interfaces for react

'use client';

import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.mjs";
import { DelayDefaultPropsContext } from "./contexts/DefaultPropsContexts.mjs";
import { Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from "./models/SuspensiveError.mjs";
import { useTimeout } from "./hooks/useTimeout.mjs";
import { useContext, useState } from "react";
import { Fragment, jsx } from "react/jsx-runtime";

//#region src/Delay.tsx
/**
* This component delays the rendering of its children for a specified duration.
*
* The Delay component provides a way to introduce intentional delays in rendering,
* which can be useful for loading states or animations.
* @see {@link https://suspensive.org/docs/react/Delay Suspensive Docs}
*/
const Delay = Object.assign((props) => {
	var _ref, _props$ms;
	if (process.env.NODE_ENV === "development" && typeof props.ms === "number") SuspensiveError.assert(props.ms >= 0, Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0);
	const defaultProps = useContext(DelayDefaultPropsContext);
	const ms = (_ref = (_props$ms = props.ms) !== null && _props$ms !== void 0 ? _props$ms : defaultProps.ms) !== null && _ref !== void 0 ? _ref : 0;
	const [isDelayed, setIsDelayed] = useState(ms <= 0);
	useTimeout(() => setIsDelayed(true), ms);
	if (typeof props.children === "function") return /* @__PURE__ */ jsx(Fragment, { children: props.children({ isDelayed }) });
	if (isDelayed) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
	if (props.fallback === void 0) return /* @__PURE__ */ jsx(Fragment, { children: defaultProps.fallback });
	return /* @__PURE__ */ jsx(Fragment, { children: props.fallback });
}, {
	displayName: "Delay",
	with: (delayProps, Component) => Object.assign((props) => /* @__PURE__ */ jsx(Delay, _objectSpread2(_objectSpread2({}, delayProps), {}, { children: /* @__PURE__ */ jsx(Component, _objectSpread2({}, props)) })), { displayName: `${Delay.displayName}.with(${Component.displayName || Component.name || "Component"})` })
});

//#endregion
export { Delay };
//# sourceMappingURL=Delay.mjs.map