Ref: modification components in selfcheckout

package/components/atoms/CustomLoading.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { CircularProgress } from '@mui/material';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+
+const CustomLoading: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full space-y-4">
+      <CircularProgress
+        size={60}
+        thickness={4}
+        className="text-blue-600 animate-spin"
+      />
+
+      <RadixTooltip.Provider>
+        <RadixTooltip.Root>
+          <RadixTooltip.Trigger asChild>
+            <div className="text-gray-600 font-semibold text-lg cursor-pointer">
+              Loading, please wait...
+            </div>
+          </RadixTooltip.Trigger>
+          <RadixTooltip.Portal>
+            <RadixTooltip.Content
+              side="top"
+              sideOffset={5}
+              className="bg-gray-800 text-white rounded-md p-2 shadow-md text-sm"
+            >
+              Fetching data from the server. This may take a moment.
+              <RadixTooltip.Arrow className="fill-gray-800" />
+            </RadixTooltip.Content>
+          </RadixTooltip.Portal>
+        </RadixTooltip.Root>
+      </RadixTooltip.Provider>
+
+      {/* Tailwind CSS animation for visual effect */}
+      <div className="relative mt-2">
+        <div className="size-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomLoading;