xtablo-source/ui/src/components/CustomLoadingOverlay.tsx
2025-07-14 13:05:44 +02:00

34 lines
887 B
TypeScript

import React from "react";
import { getXtabloIcon } from "@ui/utils/iconHelpers";
interface CustomLoadingOverlayProps {
loadingMessage?: string;
}
export const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = ({
loadingMessage = "Loading...",
}) => {
const icon = getXtabloIcon();
return (
<div className="ag-overlay-loading-center" role="presentation">
<div
style={{
display: "flex",
flexDirection: "column", // Arrange icon and text vertically
alignItems: "center",
justifyContent: "center",
}}
>
<img
src={icon}
alt="Loading icon"
className="animate-spin h-10 w-10" // Apply spin animation and size
/>
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
{loadingMessage}
</p>
</div>
</div>
);
};