add isInitialized check

Author: alexcarpenter

packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx

@@ -43,7 +43,7 @@ function withLastActiveFallback(cb: () => string): string {
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
-  const { isDragging, cornerStyle, containerRef, onPointerDown, preventClick } = useDragToCorner();
+  const { isDragging, cornerStyle, containerRef, onPointerDown, preventClick, isInitialized } = useDragToCorner();
 
   useEffect(() => {
     if (isSignedIn) {
@@ -122,6 +122,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
         style={{
           ...cornerStyle,
           position: 'fixed',
+          opacity: isInitialized ? undefined : 0,
         }}
         sx={t => ({
           height: `${t.sizes.$10}`,
@@ -133,8 +134,8 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           transition: isDragging
             ? 'none'
             : isForcedExpanded
-              ? 'height 230ms cubic-bezier(0.28, 1, 0.32, 1), width 230ms cubic-bezier(0.28, 1, 0.32, 1), padding 230ms cubic-bezier(0.28, 1, 0.32, 1), border-radius 230ms cubic-bezier(0.28, 1, 0.32, 1)'
-              : 'height 195ms cubic-bezier(0.2, 0.61, 0.1, 1), width 195ms cubic-bezier(0.2, 0.61, 0.1, 1), padding 195ms cubic-bezier(0.2, 0.61, 0.1, 1), border-radius 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+              ? 'opacity 150ms ease-out, height 230ms cubic-bezier(0.28, 1, 0.32, 1), width 230ms cubic-bezier(0.28, 1, 0.32, 1), padding 230ms cubic-bezier(0.28, 1, 0.32, 1), border-radius 230ms cubic-bezier(0.28, 1, 0.32, 1)'
+              : 'opacity 150ms ease-out, height 195ms cubic-bezier(0.2, 0.61, 0.1, 1), width 195ms cubic-bezier(0.2, 0.61, 0.1, 1), padding 195ms cubic-bezier(0.2, 0.61, 0.1, 1), border-radius 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',

packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts

@@ -1,5 +1,5 @@
 import type { PointerEventHandler } from 'react';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
@@ -33,6 +33,7 @@ interface UseDragToCornerResult {
   containerRef: React.RefObject<HTMLDivElement>;
   onPointerDown: PointerEventHandler;
   preventClick: boolean;
+  isInitialized: boolean;
 }
 
 const getCornerFromPosition = (x: number, y: number): Corner => {
@@ -119,11 +120,34 @@ const calculateVelocity = (history: Velocity[]): Point => {
 };
 
 export const useDragToCorner = (): UseDragToCornerResult => {
-  const [corner, setCorner] = useState<Corner>(loadCornerPreference);
+  // Initialize with deterministic server-safe value to avoid SSR/hydration mismatch
+  const [corner, setCorner] = useState<Corner>('bottom-right');
   const [isDragging, setIsDragging] = useState(false);
   const [preventClick, setPreventClick] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
   const pendingCornerUpdate = useRef<Corner | null>(null);
 
+  // Defer localStorage read to client-side only after mount
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      setIsInitialized(true);
+      return;
+    }
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored && ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(stored)) {
+        const storedCorner = stored as Corner;
+        // Set corner before making visible to prevent flash
+        setCorner(storedCorner);
+      }
+    } catch {
+      // Ignore localStorage errors
+    } finally {
+      // Mark as initialized after reading localStorage (or if it fails)
+      setIsInitialized(true);
+    }
+  }, []);
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const machine = useRef<{ state: 'idle' | 'press' | 'animating' } | { state: 'drag'; pointerId: number }>({
     state: 'idle',
@@ -386,5 +410,6 @@ export const useDragToCorner = (): UseDragToCornerResult => {
     containerRef,
     onPointerDown: handlePointerDown,
     preventClick,
+    isInitialized,
   };
 };