Add Loading component based on Idea-React reference

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

app/page.tsx

@@ -7,6 +7,7 @@ import { FilePickerExample } from "@/registry/new-york/blocks/file-picker/exampl
 import { FilePreviewExample } from "@/registry/new-york/blocks/file-preview/example";
 import { FormFieldExample } from "@/registry/new-york/blocks/form-field/example";
 import { ImagePreviewExample } from "@/registry/new-york/blocks/image-preview/example";
+import LoadingExample from "@/registry/new-york/blocks/loading/example";
 import { PagerExample } from "@/registry/new-york/blocks/pager/example";
 import { RangeInputExample } from "@/registry/new-york/blocks/range-input/example";
 import { RestTableExample } from "@/registry/new-york/blocks/rest-table/example";
@@ -33,6 +34,13 @@ export default function Home() {
           <SpinnerExample />
         </ComponentCard>
 
+        <ComponentCard
+          name="loading"
+          description="A full-screen loading overlay component with spinner and customizable message."
+        >
+          <LoadingExample />
+        </ComponentCard>
+
         <ComponentCard
           name="badge-bar"
           description="A component for displaying a list of badges with optional click and delete handlers."

registry.json

@@ -16,6 +16,20 @@
         }
       ]
     },
+    {
+      "name": "loading",
+      "type": "registry:component",
+      "title": "Loading",
+      "description": "A full-screen loading overlay component with spinner and customizable message.",
+      "registryDependencies": ["@mobx-restful-shadcn/spinner"],
+      "files": [
+        {
+          "type": "registry:component",
+          "path": "registry/new-york/blocks/loading/index.tsx",
+          "target": "components/ui/mobx-restful-shadcn/loading/index.tsx"
+        }
+      ]
+    },
     {
       "name": "badge-bar",
       "type": "registry:component",

registry/new-york/blocks/loading/example.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Loading } from ".";
+
+export default function LoadingExample() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4 items-center p-8">
+      <Button onClick={() => setIsLoading(!isLoading)}>
+        {isLoading ? "Hide Loading" : "Show Loading"}
+      </Button>
+
+      <p className="text-sm text-muted-foreground">
+        Click the button to toggle the full-screen loading overlay
+      </p>
+
+      {isLoading && (
+        <Loading>
+          <span>Please wait...</span>
+        </Loading>
+      )}
+    </div>
+  );
+}

registry/new-york/blocks/loading/index.tsx

@@ -0,0 +1,29 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { Spinner } from "../spinner";
+
+export interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export const Loading: FC<LoadingProps> = ({
+  className,
+  children = "Loading...",
+  ...props
+}) => (
+  <div
+    className={cn(
+      "fixed inset-0 z-50 flex h-full w-full items-center justify-center bg-black/25",
+      className,
+    )}
+    {...props}
+  >
+    <div className="flex items-center gap-3">
+      <Spinner className="text-primary" />
+      {children && <span className="text-white">{children}</span>}
+    </div>
+  </div>
+);
+
+Loading.displayName = "Loading";