diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/new/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/new/page.tsx
index 713ed4c6e6..12ca114d3e 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/new/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/new/page.tsx
@@ -2,9 +2,8 @@ import { getTranslate, _generateMetadata } from "app/_utils";
 import { Suspense } from "react";
 
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
-import { NewWebhookView } from "@calcom/features/webhooks/pages/webhook-new-view";
+import { NewWebhookView, SkeletonLoader } from "@calcom/features/webhooks/pages/webhook-new-view";
 import { APP_NAME } from "@calcom/lib/constants";
-import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -12,17 +11,6 @@ export const generateMetadata = async () =>
     (t) => t("add_webhook_description", { appName: APP_NAME })
   );
 
-const SkeletonLoader = () => {
-  return (
-    <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
-        <SkeletonText className="h-8 w-full" />
-        <SkeletonText className="h-8 w-full" />
-      </div>
-    </SkeletonContainer>
-  );
-};
-
 const Page = async () => {
   const t = await getTranslate();
 
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index 6901271d35..2206a1f54c 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -6,12 +6,24 @@ import { useRouter } from "next/navigation";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 
 import type { WebhookFormSubmitData } from "../components/WebhookForm";
 import WebhookForm from "../components/WebhookForm";
 import { subscriberUrlReserved } from "../lib/subscriberUrlReserved";
 
+export const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 export const NewWebhookView = () => {
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();