feat: implement loading components and lazy loading functionality

Author: typescript-any

src/components/loading.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+
+interface LoadingProps {
+  size?: "sm" | "md" | "lg";
+  text?: string;
+  className?: string;
+}
+
+export function Loading({ size = "md", text, className }: LoadingProps) {
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-8 h-8",
+    lg: "w-12 h-12",
+  };
+
+  return (
+    <div
+      className={cn("flex flex-col items-center justify-center p-8", className)}
+    >
+      <div
+        className={cn(
+          "animate-spin rounded-full border-2 border-gray-300 border-t-blue-600",
+          sizeClasses[size]
+        )}
+      />
+      {text && <p className="mt-2 text-sm text-gray-600">{text}</p>}
+    </div>
+  );
+}
+
+export function PageLoading({ text = "Loading..." }: { text?: string }) {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <Loading size="lg" text={text} />
+    </div>
+  );
+}
+
+export default Loading;

src/lib/utils/lazy-loader.tsx

@@ -0,0 +1,78 @@
+import { lazy, Suspense } from "react";
+import type { ComponentType, ReactNode } from "react";
+import { PageLoading } from "@/components/loading";
+
+// Type for the import function
+type ImportFunction = () => Promise<{ default: ComponentType<unknown> }>;
+
+// Options for the lazy wrapper
+interface LazyOptions {
+  fallback?: ReactNode;
+  displayName?: string;
+}
+
+/**
+ * Higher-order function that wraps React.lazy with configurable fallback
+ * and automatic component naming
+ *
+ * @param importFn - The dynamic import function
+ * @param options - Configuration options for fallback and naming
+ * @returns A React component wrapped with Suspense and lazy loading
+ */
+export function createLazyComponent(
+  importFn: ImportFunction,
+  options: LazyOptions = {}
+): ComponentType<unknown> {
+  const { fallback, displayName } = options;
+
+  // Create the lazy component
+  const LazyComponent = lazy(importFn);
+
+  // Create the wrapper component with Suspense
+  const WrappedComponent: ComponentType<unknown> = (props: unknown) => {
+    const defaultFallback = <PageLoading text="Loading page..." />;
+
+    return (
+      <Suspense fallback={fallback || defaultFallback}>
+        <LazyComponent {...(props as Record<string, unknown>)} />
+      </Suspense>
+    );
+  };
+
+  // Set display name for better debugging
+  if (displayName) {
+    WrappedComponent.displayName = `Lazy(${displayName})`;
+  } else {
+    // Try to extract component name from import path
+    const importStr = importFn.toString();
+    const pathMatch = importStr.match(/import\(["'](.+)["']\)/);
+    if (pathMatch) {
+      const path = pathMatch[1];
+      const componentName =
+        path.split("/").pop()?.replace(/['"]/g, "") || "Component";
+      WrappedComponent.displayName = `Lazy(${componentName})`;
+    } else {
+      WrappedComponent.displayName = "LazyComponent";
+    }
+  }
+
+  return WrappedComponent;
+}
+
+/**
+ * Convenience wrapper around createLazyComponent that always provides
+ * a PageLoading fallback component, unless another fallback is explicitly
+ * provided.
+ *
+ * @param importFn - The dynamic import function
+ * @param options - Configuration options for fallback and naming
+ * @returns A React component wrapped with Suspense and lazy loading
+ */
+export function withLazyLoading(
+  importFn: ImportFunction,
+  options: LazyOptions = {}
+): ComponentType<unknown> {
+  return createLazyComponent(importFn, {
+    fallback: options.fallback || <PageLoading />,
+  });
+}

src/pages/admin/index.ts

@@ -1 +1,3 @@
-export { default as AdminPage } from "./admin-page";
+import AdminPage from "./admin-page";
+
+export default AdminPage;

src/pages/create-post/index.ts

@@ -1 +1,3 @@
-export { default as CreatePostPage } from "./create-post-page";
+import CreatePostPage from "./create-post-page";
+
+export default CreatePostPage;

src/pages/forbidden/index.ts

@@ -1 +1,3 @@
-export { default as ForbiddenPage } from "./forbidden-page";
+import ForbiddenPage from "./forbidden-page";
+
+export default ForbiddenPage;

src/pages/home/index.ts

@@ -1 +1,3 @@
-export { default as HomePage } from "./home-page";
+import HomePage from "./home-page";
+
+export default HomePage;

src/routes/index.tsx

@@ -3,15 +3,17 @@ import Layout from "../layout";
 
 import ErrorElement from "@/components/error-element";
 import NotFound from "@/components/not-found";
-import { ForbiddenPage } from "@/pages/forbidden";
 import type { RouteObject } from "react-router";
 import authRoutes from "./auth-routes";
 import MainLayout from "@/components/layout/main-layout";
 import withGuards from "@/lib/utils/with-guards";
-import { AdminPage } from "@/pages/admin";
-import { CreatePostPage } from "@/pages/create-post";
-import { HomePage } from "@/pages/home";
-import ThemeDemo from "@/components/theme-demo";
+import HomePage from "@/pages/home";
+import { withLazyLoading } from "@/lib/utils/lazy-loader";
+
+const AdminPage = withLazyLoading(() => import("@/pages/admin"));
+const CreatePostPage = withLazyLoading(() => import("@/pages/create-post"));
+const ForbiddenPage = withLazyLoading(() => import("@/pages/forbidden"));
+const ThemeDemo = withLazyLoading(() => import("@/components/theme-demo"));
 
 const routes: RouteObject[] = [
   {