From 9c7cf7b855ed0b90eb52675cafdc8a16562abdc8 Mon Sep 17 00:00:00 2001
From: Felix Wotschofsky <felix@wotschofsky.com>
Date: Sat, 21 Oct 2023 20:05:42 +0200
Subject: [PATCH] =?UTF-8?q?Improve=20loading=20states=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/lookup/[domain]/loading.tsx       | 18 ++++++++++++++++++
 app/lookup/[domain]/whois/loading.tsx |  9 ++++++---
 components/ui/skeleton.tsx            | 15 +++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 app/lookup/[domain]/loading.tsx
 create mode 100644 components/ui/skeleton.tsx

diff --git a/app/lookup/[domain]/loading.tsx b/app/lookup/[domain]/loading.tsx
new file mode 100644
index 0000000..1176122
--- /dev/null
+++ b/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;
diff --git a/app/lookup/[domain]/whois/loading.tsx b/app/lookup/[domain]/whois/loading.tsx
index 896c5e4..9bc481b 100644
--- a/app/lookup/[domain]/whois/loading.tsx
+++ b/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>
 );
 
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..a626d9b
--- /dev/null
+++ b/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 };