clean up

apps/studio/components/interfaces/BranchManagement/DatabaseDiffPanel.tsx

@@ -1,9 +1,8 @@
 import Link from 'next/link'
-import { Database, Wind } from 'lucide-react'
-import { Card, CardContent, CardHeader, CardTitle } from 'ui'
+import { CircleAlert, Database, Wind } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle, Skeleton } from 'ui'
 
 import DiffViewer from 'components/ui/DiffViewer'
-import { Loading, ErrorState, EmptyState } from 'components/ui/AsyncState'
 
 interface DatabaseDiffPanelProps {
   diffContent?: string
@@ -19,18 +18,28 @@ const DatabaseDiffPanel = ({
   error,
   currentBranchRef,
 }: DatabaseDiffPanelProps) => {
-  if (isLoading) return <Loading />
+  if (isLoading) return <Skeleton className="h-64" />
 
-  if (error) return <ErrorState message="Error loading branch diff" />
+  if (error)
+    return (
+      <div className="p-6 text-center">
+        <CircleAlert size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
+        <h3 className="mb-1">Error loading branch diff</h3>
+        <p className="text-sm text-foreground-light">
+          Please try again in a few minutes and contact support if the problem persists.
+        </p>
+      </div>
+    )
 
-  // Handle empty diff content
   if (!diffContent || diffContent.trim() === '') {
     return (
-      <EmptyState
-        title="No changes detected between branches"
-        description="Any changes to your database schema will be shown here for review"
-        icon={Wind}
-      />
+      <div className="p-6 text-center">
+        <Wind size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
+        <h3 className="mb-1">No changes detected between branches</h3>
+        <p className="text-sm text-foreground-light">
+          Any changes to your database schema will be shown here for review
+        </p>
+      </div>
     )
   }
 

apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx

@@ -2,7 +2,6 @@ import { Code, Wind } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 
-import { EmptyState, Loading } from 'components/ui/AsyncState'
 import DiffViewer from 'components/ui/DiffViewer'
 import type { EdgeFunctionBodyData } from 'data/edge-functions/edge-function-body-query'
 import type {
@@ -12,7 +11,7 @@ import type {
 } from 'hooks/branches/useEdgeFunctionsDiff'
 import { EMPTY_ARR } from 'lib/void'
 import { basename } from 'path'
-import { Card, CardContent, CardHeader, CardTitle, cn } from 'ui'
+import { Card, CardContent, CardHeader, CardTitle, cn, Skeleton } from 'ui'
 
 interface EdgeFunctionsDiffPanelProps {
   diffResults: EdgeFunctionsDiffResult
@@ -146,16 +145,18 @@ const EdgeFunctionsDiffPanel = ({
   mainBranchRef,
 }: EdgeFunctionsDiffPanelProps) => {
   if (diffResults.isLoading) {
-    return <Loading />
+    return <Skeleton className="h-64" />
   }
 
   if (!diffResults.hasChanges) {
     return (
-      <EmptyState
-        title="No changes detected between branches"
-        description="Any changes to your edge functions will be shown here for review"
-        icon={Wind}
-      />
+      <div className="p-6 text-center">
+        <Wind size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
+        <h3 className="mb-1">No changes detected between branches</h3>
+        <p className="text-sm text-foreground-light">
+          Any changes to your edge functions will be shown here for review
+        </p>
+      </div>
     )
   }
 

apps/studio/components/ui/AsyncState.tsx

@@ -1,34 +0,0 @@
-import { Skeleton } from 'ui'
-import { CircleAlert, LucideIcon, Wind } from 'lucide-react'
-
-export const Loading = () => <Skeleton className="h-64" />
-
-export const ErrorState = ({
-  message = 'An unexpected error has occurred',
-}: {
-  message?: string
-}) => (
-  <div className="p-6 text-center">
-    <CircleAlert size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
-    <h3 className="mb-1">{message}</h3>
-    <p className="text-sm text-foreground-light">
-      Please try again in a few minutes and contact support if the problem persists.
-    </p>
-  </div>
-)
-
-export const EmptyState = ({
-  title,
-  description,
-  icon: Icon = Wind,
-}: {
-  title: string
-  description: string
-  icon?: LucideIcon
-}) => (
-  <div className="p-6 text-center">
-    <Icon size={32} strokeWidth={1.5} className="text-foreground-muted mx-auto mb-8" />
-    <h3 className="mb-1">{title}</h3>
-    <p className="text-sm text-foreground-light">{description}</p>
-  </div>
-)