add loading spinner

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>
+  );
+}

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) => (

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)