fix: webhook improvement (#18220)

apps/web/app/settings/(settings-layout)/developer/webhooks/new/page.tsx

@@ -1,8 +1,10 @@
 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 { APP_NAME } from "@calcom/lib/constants";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -10,6 +12,17 @@ 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();
 
@@ -19,7 +32,9 @@ const Page = async () => {
       description={t("add_webhook_description", { appName: APP_NAME })}
       borderInShellHeader={true}
       backButton>
-      <NewWebhookView />
+      <Suspense fallback={<SkeletonLoader />}>
+        <NewWebhookView />
+      </Suspense>
     </SettingsHeader>
   );
 };

packages/features/ee/workflows/components/TimeTimeUnitInput.tsx

@@ -17,6 +17,7 @@ const TIME_UNITS = [TimeUnit.DAY, TimeUnit.HOUR, TimeUnit.MINUTE] as const;
 
 type Props = {
   disabled: boolean;
+  defaultTime?: number;
 };
 
 const TimeUnitAddonSuffix = ({
@@ -62,7 +63,7 @@ export const TimeTimeUnitInput = (props: Props) => {
           min="1"
           label=""
           disabled={props.disabled}
-          defaultValue={form.getValues("time") || 24}
+          defaultValue={form.getValues("time") ?? props.defaultTime ?? 24}
           className="-mt-2 rounded-r-none text-sm focus:ring-0"
           {...form.register("time", { valueAsNumber: true })}
           addOnSuffix={

packages/features/webhooks/components/WebhookForm.tsx

@@ -229,7 +229,7 @@ const WebhookForm = (props: {
         {showTimeSection && (
           <div className="mt-5">
             <Label>{t("how_long_after_user_no_show_minutes")}</Label>
-            <TimeTimeUnitInput disabled={false} />
+            <TimeTimeUnitInput disabled={false} defaultTime={5} />
           </div>
         )}
 

packages/features/webhooks/pages/webhook-new-view.tsx

@@ -6,22 +6,12 @@ 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 { showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { showToast } from "@calcom/ui";
 
 import type { WebhookFormSubmitData } from "../components/WebhookForm";
 import WebhookForm from "../components/WebhookForm";
 import { subscriberUrlReserved } from "../lib/subscriberUrlReserved";
 
-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();
@@ -87,7 +77,7 @@ export const NewWebhookView = () => {
     });
   };
 
-  if (isPending) return <SkeletonLoader />;
+  if (isPending) return null;
 
   return (
     <WebhookForm