chore: loading spinner

This commit is contained in:
Catalin Pit
2024-02-16 13:44:28 +02:00
parent a1459b41fd
commit cd240ae8a4
2 changed files with 15 additions and 2 deletions

View File

@ -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}>

View File

@ -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">