refactor(Loading): update Loading component import paths

- Changed import paths for the Loading component from "@/app/loading" to "@/components/loading" across multiple files to maintain consistency and improve modularity.
- Removed the Loading component definition from loading.tsx, simplifying the file structure.

src/components/Layouts/conditional-layout.tsx

@@ -16,9 +16,9 @@ function MainLayout({ children }: PropsWithChildren) {
       <Sidebar />
       {/* Spacer to reserve space for collapsed sidebar on mobile - avoids reflow */}
       {isMobile && <div className="w-[70px] shrink-0" />}
-      <div className="w-full bg-gray-2 dark:bg-[#020d1a]">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-gray-2 dark:bg-[#020d1a]">
         <Header />
-        <main className="isolate mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
+        <main className="isolate flex min-h-0 flex-1 flex-col mx-auto w-full max-w-screen-2xl overflow-hidden p-4 md:p-6 2xl:p-10">
           {children}
         </main>
       </div>

src/components/Layouts/header/index.tsx

@@ -6,7 +6,7 @@ import { UserInfo } from "./user-info";
 
 export function Header() {
   return (
-    <header className="sticky top-0 z-30 flex items-center justify-between border-b border-stroke bg-white px-4 py-5 shadow-1 dark:border-stroke-dark dark:bg-gray-dark md:px-5 2xl:px-10">
+    <header className="sticky top-0 z-30 flex shrink-0 items-center justify-between border-b border-stroke bg-white px-4 py-5 shadow-1 dark:border-stroke-dark dark:bg-gray-dark md:px-5 2xl:px-10">
       <div className="max-xl:hidden">
         <h1 className="mb-0.5 text-heading-5 font-bold text-dark dark:text-white">
           Opportunity Lens

src/components/Layouts/header/notification/notification-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import IsVisible from "@/components/ui/IsVisible";
 import { useGetMyNotifications } from "@/hooks/queries/useNotificationQueries";
 import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
@@ -21,7 +21,10 @@ const NotificationList = ({
     setUnreadNotificationCount(data?.data.length ?? 0);
   }, [data, isLoading]);
 
-  if (isLoading) return <Loading className={"p-6"} />;
+  if (isLoading)
+    return (
+      <Loading className="min-h-48 flex-none justify-center p-6" />
+    );
 
   return (
     <ul className="mb-3 max-h-[23rem] space-y-1.5 overflow-y-auto">

src/components/Layouts/sidebar/index.tsx

@@ -59,7 +59,7 @@ export function Sidebar() {
 
       <aside
         className={cn(
-          "overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
+          "shrink-0 overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
           isMobile ? "fixed bottom-0 top-0 z-50" : "sticky top-0 h-screen",
           isMobile
             ? isOpen

src/components/loading.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+interface IProps {
+  className?: string | null;
+}
+/**
+ * Grows with a flex `main` parent so the spinner sits in the middle of the content area.
+ * Guards: `min-h-svh flex-none`. Compact UI: `flex-none min-h-*`.
+ */
+const Loading = ({ className }: IProps) => {
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 w-full min-w-0 flex-1 items-center justify-center",
+        className,
+      )}
+    >
+      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary" />
+    </div>
+  );
+};
+
+export default Loading;