From cd240ae8a4e29a0471c76b832891b8c07e1a09e6 Mon Sep 17 00:00:00 2001
From: Catalin Pit <25515812+catalinpit@users.noreply.github.com>
Date: Fri, 16 Feb 2024 13:44:28 +0200
Subject: [PATCH] chore: loading spinner

---
 .../src/app/(dashboard)/settings/webhooks/[id]/page.tsx  | 8 +++++++-
 apps/web/src/app/(dashboard)/settings/webhooks/page.tsx  | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/webhooks/[id]/page.tsx b/apps/web/src/app/(dashboard)/settings/webhooks/[id]/page.tsx
index 785536c2a..b9f04790c 100644
--- a/apps/web/src/app/(dashboard)/settings/webhooks/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/webhooks/[id]/page.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -39,7 +40,7 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
   const { toast } = useToast();
   const router = useRouter();
 
-  const { data: webhook } = trpc.webhook.getWebhookById.useQuery(
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
     {
       id: Number(params.id),
     },
@@ -87,6 +88,11 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
         title="Edit webhook"
         subtitle="On this page, you can edit the webhook and its settings."
       />
+      {isLoading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
diff --git a/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx b/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
index 638443bf9..d0532c065 100644
--- a/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/webhooks/page.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 
 import { Zap } from 'lucide-react';
 import { ToggleLeft, ToggleRight } from 'lucide-react';
+import { Loader } from 'lucide-react';
 
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -13,7 +14,7 @@ import { CreateWebhookDialog } from '~/components/(dashboard)/settings/webhooks/
 import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/delete-webhook-dialog';
 
 export default function WebhookPage() {
-  const { data: webhooks } = trpc.webhook.getWebhooks.useQuery();
+  const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
 
   return (
     <div>
@@ -24,6 +25,12 @@ export default function WebhookPage() {
         <CreateWebhookDialog />
       </SettingsHeader>
 
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+
       {webhooks && webhooks.length === 0 && (
         // TODO: Perhaps add some illustrations here to make the page more engaging
         <div className="mb-4">