Add loading spinner for API keys page

apps/web/src/app/(dashboard)/api-keys/api-list.tsx

@@ -11,6 +11,7 @@ import {
 import { formatDistanceToNow } from "date-fns";
 import { api } from "~/trpc/react";
 import DeleteApiKey from "./delete-api-key";
+import Spinner from "@unsend/ui/src/spinner";
 
 export default function ApiList() {
   const apiKeysQuery = api.apiKey.getApiKeys.useQuery();
@@ -30,7 +31,17 @@ export default function ApiList() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {apiKeysQuery.data?.map((apiKey) => (
+            {apiKeysQuery.isLoading ? (
+              <TableRow className="h-32">
+                <TableCell colSpan={6} className="text-center py-4">
+                  <Spinner
+                    className="w-6 h-6 mx-auto"
+                    innerSvgClass="stroke-primary"
+                  />
+                </TableCell>
+              </TableRow>
+            ) : (
+              apiKeysQuery.data?.map((apiKey) => (
                 <TableRow key={apiKey.id}>
                   <TableCell>{apiKey.name}</TableCell>
                   <TableCell>{apiKey.partialToken}</TableCell>
@@ -47,7 +58,8 @@ export default function ApiList() {
                     <DeleteApiKey apiKey={apiKey} />
                   </TableCell>
                 </TableRow>
-            ))}
+              ))
+            )}
           </TableBody>
         </Table>
       </div>