Improve loading states ✨

app/lookup/[domain]/loading.tsx

@@ -0,0 +1,18 @@
+import { type FC, Fragment } from 'react';
+
+import { Skeleton } from '@/components/ui/skeleton';
+
+const DomainError: FC = () => (
+  <div className="mt-12">
+    {Array.from({ length: 3 }).map((_, i) => (
+      <Fragment key={i}>
+        <Skeleton className="mb-4 mt-8 h-7 w-16 rounded-sm" />
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton className="my-3 h-5 w-full rounded-sm" key={i} />
+        ))}
+      </Fragment>
+    ))}
+  </div>
+);
+
+export default DomainError;

app/lookup/[domain]/whois/loading.tsx

@@ -1,8 +1,11 @@
-import { Spinner } from '@/components/ui/spinner';
+import { Skeleton } from '@/components/ui/skeleton';
 
 const WhoisLoading = () => (
-  <div className="flex items-center justify-center">
-    <Spinner className="my-8" />
+  <div className="mt-12">
+    <Skeleton className="mb-4 mt-8 h-9 w-48 rounded-sm" />
+    {Array.from({ length: 10 }).map((_, i) => (
+      <Skeleton className="my-3 h-5 w-full rounded-sm" key={i} />
+    ))}
   </div>
 );
 

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };