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/app/(companies)/companies/details/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
 import IsVisible from "@/components/ui/IsVisible";

src/app/(companies)/companies/edit/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 
 import CreateCompany from "@/components/forms/companies/CreateCompany";

src/app/(companies)/company-categories/edit/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateCompanyCategoryForm from "@/components/forms/companies/company-categories/CreateCompanyCategory";
 import { useCompanyCategoriesDetails } from "@/hooks/queries";

src/app/(notifications)/notification-history/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { NotificationDetailsCard } from "@/components/ui/notification-details-card";
 import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";

src/app/admins/edit/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateAdminForm from "@/components/forms/admins/CreateAdmin";
 import { useAdminDetails } from "@/hooks/queries";

src/app/customers/edit/[id]/page.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/hooks/queries/useCustomerQueries";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import CreateCustomer from "@/components/forms/customers/CreateCustomer";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 
 const EditCustomer = ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = use(params);

src/app/loading.tsx

@@ -1,15 +1,3 @@
-import { cn } from "../lib/utils";
+import Loading from "@/components/loading";
-
-interface IProps {
-  className?: string | null;
-}
-
-const Loading = ({ className = "w-svw h-svh" }: IProps) => {
-  return (
-    <div className={cn("flex items-center justify-center", className)}>
-      <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
-    </div>
-  );
-};
 
 export default Loading;

src/app/marketing/edit/[id]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import { useGetCmsDetails, useUpdateCms } from "@/hooks/queries/useCmsQueries";
 import { BreadcrumbItem } from "@/types/shared";
 import { use } from "react";

src/app/pages/settings/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import InputGroup from "@/components/FormElements/InputGroup";
 import { Select } from "@/components/FormElements/select";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";

src/app/tenders/[details]/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 import { LocationIcon } from "@/assets/icons";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";

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;

src/contexts/Auth-guard.ctx.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useEffect, ReactNode } from "react";
 import { useUser } from "./";
-import Loading from "@/app/loading";
+import Loading from "@/components/loading";
 
 interface AuthGuardProps {
   children: ReactNode;
@@ -20,7 +20,7 @@ const AuthGuard = ({ children }: AuthGuardProps): React.ReactNode => {
   }, [isLoading, isAuthenticated, router]);
 
   if (isLoading || !isAuthenticated) {
-    return <Loading />;
+    return <Loading className="min-h-svh flex-none" />;
   }
 
   return children;

src/contexts/Login-guard.ctx.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { useUser } from "./";
 import { useRouter } from "next/navigation";
-import Loading from "../app/loading";
+import Loading from "@/components/loading";
 
 interface LoginGuardProps {
   children: React.ReactNode;
@@ -19,7 +19,7 @@ const LoginGuard = ({ children }: LoginGuardProps): React.ReactNode => {
   }, [isLoading, isAuthenticated, router]);
 
   if (isLoading || isAuthenticated) {
-    return <Loading />;
+    return <Loading className="min-h-svh flex-none" />;
   }
   return children;
 };