From c4f462c6022d3c6798e71708e13e775c0b336f04 Mon Sep 17 00:00:00 2001
From: os-zhuang <jack@objectstack.ai>
Date: Thu, 11 Jun 2026 21:32:48 +0500
Subject: [PATCH] feat(ux): depth + entrance on shared EmptyState
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Give every empty/error/idle screen more personality: the icon now sits in
a layered badge (a faint concentric halo behind a tinted tile) instead of
a flat grey square, switched to the brand tint, and the group eases in —
the badge springs (ZoomIn), the title/description/action rise with a short
stagger. The root stays a plain View so flex-1 centering is never affected
by the animation; only the inner pieces animate.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 components/ui/EmptyState.tsx | 78 ++++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 22 deletions(-)

diff --git a/components/ui/EmptyState.tsx b/components/ui/EmptyState.tsx
index 8eb2e82..7efbd3f 100644
--- a/components/ui/EmptyState.tsx
+++ b/components/ui/EmptyState.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
+import Animated, { FadeInDown, ZoomIn } from "react-native-reanimated";
 import type { LucideIcon } from "lucide-react-native";
 import { Button } from "~/components/ui/Button";
 
@@ -19,7 +20,10 @@ export interface EmptyStateProps {
 
 /**
  * A centred icon-badge + title + body used for empty, error, and idle states
- * across the app. Keeps every "nothing here" screen visually consistent.
+ * across the app. The badge sits inside a soft concentric halo for depth, and
+ * the whole group eases in — the badge springs, the copy rises with a short
+ * stagger — so "nothing here" feels considered rather than blank. Keeps every
+ * empty/error screen visually consistent.
  */
 export function EmptyState({
   icon: Icon,
@@ -33,31 +37,61 @@ export function EmptyState({
 }: EmptyStateProps) {
   const isError = variant === "error";
   return (
-    <View className={"flex-1 items-center justify-center px-10 " + (className ?? "")}>
-      <View
-        className={
-          "h-20 w-20 items-center justify-center rounded-2xl " +
-          (isError ? "bg-destructive/10" : "bg-muted")
-        }
+    // Plain View owns the flex-1 centering; only the inner pieces animate, so
+    // the entrance can never interfere with layout.
+    <View
+      className={"flex-1 items-center justify-center px-10 " + (className ?? "")}
+    >
+      {/* Layered badge: a faint outer halo behind a solid inner tile gives the
+          icon depth instead of floating on a flat square. */}
+      <Animated.View
+        entering={ZoomIn.springify().damping(14).stiffness(160)}
+        className="h-24 w-24 items-center justify-center"
       >
-        <Icon size={40} color={isError ? "#dc2626" : "#94a3b8"} />
-      </View>
-      <Text className="mt-5 text-lg font-semibold text-foreground">{title}</Text>
+        <View
+          className={
+            "absolute h-24 w-24 rounded-3xl " +
+            (isError ? "bg-destructive/5" : "bg-primary/5")
+          }
+        />
+        <View
+          className={
+            "h-[68px] w-[68px] items-center justify-center rounded-2xl " +
+            (isError ? "bg-destructive/10" : "bg-primary/10")
+          }
+        >
+          <Icon size={36} color={isError ? "#dc2626" : "#64748b"} />
+        </View>
+      </Animated.View>
+
+      <Animated.Text
+        entering={FadeInDown.delay(90).duration(340)}
+        className="mt-5 text-lg font-semibold text-foreground"
+      >
+        {title}
+      </Animated.Text>
+
       {description ? (
-        <Text className="mt-2 text-center text-sm text-muted-foreground">
+        <Animated.Text
+          entering={FadeInDown.delay(150).duration(340)}
+          className="mt-2 text-center text-sm text-muted-foreground"
+        >
           {description}
-        </Text>
+        </Animated.Text>
       ) : null}
+
       {actionLabel && onAction ? (
-        <Button
-          variant={isError ? "default" : "outline"}
-          size="sm"
-          className="mt-6"
-          onPress={onAction}
-          loading={actionLoading}
-        >
-          {actionLabel}
-        </Button>
+        <Animated.View entering={FadeInDown.delay(210).duration(340)}>
+          <Button
+            variant={isError ? "default" : "outline"}
+            size="sm"
+            className="mt-6"
+            onPress={onAction}
+            loading={actionLoading}
+          >
+            {actionLabel}
+          </Button>
+        </Animated.View>
       ) : null}
     </View>
   );