From d56102d456da950720045f6ab07ee15643843cdb Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 18 Feb 2025 22:23:35 +0300
Subject: [PATCH] fix some elements on page before data loaded

---
 apps/web/components/schedule/slot-buttons.tsx     | 12 +++++++-----
 apps/web/components/schedule/slot-orders-list.tsx |  2 ++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/schedule/slot-buttons.tsx b/apps/web/components/schedule/slot-buttons.tsx
index b2d8b70..767d859 100644
--- a/apps/web/components/schedule/slot-buttons.tsx
+++ b/apps/web/components/schedule/slot-buttons.tsx
@@ -9,13 +9,18 @@ import { useRouter } from 'next/navigation';
 
 export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
   const { data } = useSlotQuery({ documentId });
+  const { mutate: updateSlot } = useSlotMutation({ documentId });
+  const { mutate: deleteSlot } = useSlotDelete({ documentId });
+
+  const router = useRouter();
+
   const slot = data?.data?.slot;
 
+  if (!slot) return null;
+
   const isOpened = slot?.state === Enum_Slot_State.Open;
   const isClosed = slot?.state === Enum_Slot_State.Closed;
 
-  const { mutate: updateSlot } = useSlotMutation({ documentId });
-
   function handleOpenSlot() {
     return updateSlot({ data: { state: Enum_Slot_State.Open }, documentId });
   }
@@ -24,9 +29,6 @@ export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
     return updateSlot({ data: { state: Enum_Slot_State.Closed }, documentId });
   }
 
-  const { mutate: deleteSlot } = useSlotDelete({ documentId });
-  const router = useRouter();
-
   function handleDeleteSlot() {
     router.back();
     return deleteSlot();
diff --git a/apps/web/components/schedule/slot-orders-list.tsx b/apps/web/components/schedule/slot-orders-list.tsx
index 08941d0..dec4c31 100644
--- a/apps/web/components/schedule/slot-orders-list.tsx
+++ b/apps/web/components/schedule/slot-orders-list.tsx
@@ -11,6 +11,8 @@ export function SlotOrdersList({
   const { data } = useSlotQuery({ documentId });
   const slot = data?.data?.slot;
 
+  if (!slot) return null;
+
   return (
     <div className={cn('bg-transparent p-4', className)}>
       <h1 className="mb-2 text-lg font-bold">Записи</h1>