@helpwave/hightide
Version:
helpwave's component and theming library
43 lines (41 loc) • 1.56 kB
JavaScript
// src/components/loading-states/LoadingAndErrorComponent.tsx
import { useState } from "react";
// src/components/loading-states/LoadingContainer.tsx
import { clsx } from "clsx";
import { jsx } from "react/jsx-runtime";
var LoadingContainer = ({ className }) => {
return /* @__PURE__ */ jsx("div", { className: clsx("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
};
// src/components/loading-states/LoadingAndErrorComponent.tsx
import { clsx as clsx2 } from "clsx";
import { jsx as jsx2 } from "react/jsx-runtime";
var LoadingAndErrorComponent = ({
children,
isLoading = false,
hasError = false,
loadingComponent,
errorComponent,
minimumLoadingDuration = 200,
className
}) => {
const [isInMinimumLoading, setIsInMinimumLoading] = useState(false);
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false);
if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
setIsInMinimumLoading(true);
setTimeout(() => {
setIsInMinimumLoading(false);
setHasUsedMinimumLoading(true);
}, minimumLoadingDuration);
}
if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
return loadingComponent ?? /* @__PURE__ */ jsx2(LoadingContainer, { className: clsx2(className) });
}
if (hasError) {
return errorComponent ?? /* @__PURE__ */ jsx2(LoadingContainer, { className: clsx2("bg-negative", className) });
}
return children;
};
export {
LoadingAndErrorComponent
};
//# sourceMappingURL=LoadingAndErrorComponent.mjs.map