From f6c52c11c36f67d431dfde5cd708761fc2a5a7fe Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 14 Jan 2025 19:29:54 +0300
Subject: [PATCH] add loading spinner

---
 apps/web/components/common/spinner.tsx           | 9 +++++++++
 apps/web/components/contacts/contacts-list.tsx   | 3 +++
 apps/web/hooks/contacts/use-customer-contacts.ts | 2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/common/spinner.tsx

diff --git a/apps/web/components/common/spinner.tsx b/apps/web/components/common/spinner.tsx
new file mode 100644
index 0000000..2d31776
--- /dev/null
+++ b/apps/web/components/common/spinner.tsx
@@ -0,0 +1,9 @@
+import { Loader2 } from 'lucide-react';
+
+export function LoadingSpinner() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Loader2 className="size-8 animate-spin text-primary" />
+    </div>
+  );
+}
diff --git a/apps/web/components/contacts/contacts-list.tsx b/apps/web/components/contacts/contacts-list.tsx
index c483125..f118684 100644
--- a/apps/web/components/contacts/contacts-list.tsx
+++ b/apps/web/components/contacts/contacts-list.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { LoadingSpinner } from '../common/spinner';
 import { useCustomerContacts } from '@/hooks/contacts';
 import * as GQL from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
@@ -31,6 +32,8 @@ const ContactRow = memo(function ({ contact }: ContactRowProps) {
 export function ContactsList() {
   const { contacts } = useCustomerContacts();
 
+  if (!contacts.length) return <LoadingSpinner />;
+
   return (
     <div className="space-y-2">
       {contacts.map((contact) => (
diff --git a/apps/web/hooks/contacts/use-customer-contacts.ts b/apps/web/hooks/contacts/use-customer-contacts.ts
index af59c1d..026ec01 100644
--- a/apps/web/hooks/contacts/use-customer-contacts.ts
+++ b/apps/web/hooks/contacts/use-customer-contacts.ts
@@ -8,7 +8,7 @@ import { use, useEffect, useMemo } from 'react';
 
 export function useCustomerContacts() {
   const { filter } = use(ContactsFilterContext);
-  const { clients = [], masters = [], setClients, setMasters } = useBoundStore();
+  const { clients, masters, setClients, setMasters } = useBoundStore();
 
   useEffect(() => {
     if ((filter === 'masters' || filter === 'all') && !masters)