New Interface (initial commit)

src/components/base/base-loading-overlay.tsx

@@ -1,32 +1,29 @@
 import React from "react";
-import { Box, CircularProgress } from "@mui/material";
+import { BaseLoading } from "./base-loading"; // 1. Импортируем наш собственный компонент загрузки
+import { cn } from "@root/lib/utils";
 
 export interface BaseLoadingOverlayProps {
   isLoading: boolean;
+  className?: string;
 }
 
 export const BaseLoadingOverlay: React.FC<BaseLoadingOverlayProps> = ({
   isLoading,
+  className,
 }) => {
   if (!isLoading) return null;
 
   return (
-    <Box
-      sx={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "rgba(255, 255, 255, 0.7)",
-        zIndex: 1000,
-      }}
+    // 2. Заменяем Box на div и переводим sx в классы Tailwind
+    <div
+      className={cn(
+        "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm",
+        className
+      )}
     >
-      <CircularProgress />
-    </Box>
+      {/* 3. Используем наш BaseLoading и делаем его немного больше */}
+      <BaseLoading className="h-8 w-8 text-primary" />
+    </div>
   );
 };