Add loading spinner for email and domain page

apps/web/src/app/(dashboard)/domains/domain-list.tsx

@@ -8,6 +8,7 @@ import { api } from "~/trpc/react";
 import React from "react";
 import { StatusIndicator } from "./status-indicator";
 import { DomainStatusBadge } from "./domain-badge";
+import Spinner from "@unsend/ui/src/spinner";
 
 export default function DomainsList() {
   const domainsQuery = api.domain.domains.useQuery();
@@ -15,7 +16,14 @@ export default function DomainsList() {
   return (
     <div className="mt-10">
       <div className="flex flex-col gap-6">
-        {!domainsQuery.isLoading && domainsQuery.data?.length ? (
+        {domainsQuery.isLoading ? (
+          <div className="flex justify-center mt-10">
+            <Spinner
+              className="w-6 h-6 mx-auto"
+              innerSvgClass="stroke-primary"
+            />
+          </div>
+        ) : domainsQuery.data?.length ? (
           domainsQuery.data?.map((domain) => (
             <DomainItem key={domain.id} domain={domain} />
           ))

apps/web/src/app/(dashboard)/emails/email-list.tsx

@@ -30,6 +30,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@unsend/ui/src/select";
+import Spinner from "@unsend/ui/src/spinner";
 
 /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */
 const DynamicSheetWithNoSSR = dynamic(
@@ -104,7 +105,16 @@ export default function EmailsList() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {emailsQuery.data?.emails.length ? (
+            {emailsQuery.isLoading ? (
+              <TableRow className="h-32">
+                <TableCell colSpan={4} className="text-center py-4">
+                  <Spinner
+                    className="w-6 h-6 mx-auto"
+                    innerSvgClass="stroke-primary"
+                  />
+                </TableCell>
+              </TableRow>
+            ) : emailsQuery.data?.emails.length ? (
               emailsQuery.data?.emails.map((email) => (
                 <TableRow
                   key={email.id}
@@ -128,7 +138,7 @@ export default function EmailsList() {
               ))
             ) : (
               <TableRow className="h-32">
-                <TableCell colSpan={4} className="text-center">
+                <TableCell colSpan={4} className="text-center py-4">
                   No emails found
                 </TableCell>
               </TableRow>

packages/ui/src/spinner.tsx

@@ -1,6 +1,9 @@
 import React from "react";
+import { cn } from "..";
 
-export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+export const Spinner: React.FC<
+  React.SVGProps<SVGSVGElement> & { innerSvgClass?: string }
+> = (props) => {
   return (
     <svg
       version="1.1"
@@ -15,7 +18,7 @@ export const Spinner: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
       <g
         strokeWidth="200"
         strokeLinecap="round"
-        className="stroke-primary-foreground"
+        className={cn("stroke-primary-foreground", props.innerSvgClass)}
         fill="none"
         id="spinner"
       >