fix: home screen tweaks

[bpierre]

• Fix scrollbar flash during home animation.
• Input & spotlight links are now interactive only once their anim starts.
• Dropdown menu stays closed after selecting an item.
• Dropdown addresses expand to fill the available space.

Greptile Overview

Greptile Summary

This PR implements several UX improvements for the home screen animations:

Animation Timing & Interactivity

• Introduced a new useMountAnim hook in animation.ts that handles smooth mounting/unmounting of elements with proper animation interruption support
• Input and spotlight links are now non-interactive (pointerEvents: 'none', tabIndex: -1) until their animations begin, preventing users from clicking invisible elements
• The inputReady state and onBegin animation callbacks ensure interactive elements only become accessible when visible

Dropdown Menu Behavior

• Fixed dropdown menu reopening issue using a submittingRef pattern - when a user selects a menu item, the ref prevents the menu from immediately reopening due to the input value change
• Applied this fix to both the search dropdown and the action dropdown

Visual Improvements

• Fixed scrollbar flash during animation by adding overflow-hidden to the wrapper div that's being animated
• Improved token address layout in search results - addresses now expand to fill available space using flex-1 with right alignment, while token name/symbol shrink as needed

Animation Tweaks

• Adjusted springInstant timing (stiffness: 1200→1400, damping: 38→40) for slightly snappier interactions
• Refactored DOM structure to support parent-controlled animations via wrapperRef prop

All changes work together to create a smoother, more polished animation experience without any visual glitches or premature interactivity.

Confidence Score: 5/5

• This PR is safe to merge with no issues found
• The changes are focused UI/animation improvements with excellent code quality. The new useMountAnim hook properly handles animation lifecycle with guards against state updates after unmount and correct animation interruption handling. The submittingRef pattern elegantly solves the dropdown reopening issue. All changes address the stated goals and maintain consistency across the codebase. No logic errors, race conditions, or edge case bugs were identified during thorough analysis.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/explorer/src/lib/animation.ts	5/5	Added useMountAnim hook for smooth mount/unmount animations with proper cleanup and animation interruption handling. Tweaked springInstant timing.
apps/explorer/src/comps/ExploreInput.tsx	5/5	Refactored to support external wrapper animation control, fixed dropdown menu reopening issue with submittingRef, improved token address layout, and integrated useMountAnim for smooth dropdown animations.
apps/explorer/src/routes/_layout/index.tsx	5/5	Improved animation timing control with inputReady state and tabIndex management. Fixed scrollbar flash with overflow-hidden. Made spotlight links interactive only after animation starts with onBegin callback.

Sequence Diagram

sequenceDiagram
    participant User
    participant HomePage as Home Page Component
    participant ExploreInput
    participant useMountAnim as useMountAnim Hook
    participant SpotlightLinks
    participant DOM

    User->>HomePage: Page loads
    activate HomePage
    
    HomePage->>HomePage: handlePhaseChange('start')
    HomePage->>ExploreInput: Render with wrapperRef
    ExploreInput->>DOM: Mount wrapper (opacity:0, pointerEvents:none)
    
    HomePage->>HomePage: animate(exploreWrapperRef)
    Note over HomePage: onBegin callback fires
    HomePage->>ExploreInput: Set pointerEvents='auto'
    HomePage->>HomePage: setInputReady(true)
    HomePage->>ExploreInput: Update tabIndex to 0
    
    par Spotlight Links Animation
        HomePage->>SpotlightLinks: Render spotlight pills
        SpotlightLinks->>DOM: Mount pills (opacity:0, pointerEvents:none)
        SpotlightLinks->>SpotlightLinks: animate with stagger
        Note over SpotlightLinks: onBegin callback fires
        SpotlightLinks->>DOM: Set pointerEvents='auto' on all pills
    end
    
    User->>ExploreInput: Type search query
    ExploreInput->>ExploreInput: setShowResults(true)
    ExploreInput->>useMountAnim: open=true
    useMountAnim->>useMountAnim: setMounted(true)
    useMountAnim->>DOM: Mount dropdown (opacity:0)
    useMountAnim->>DOM: animate(enter)
    
    User->>ExploreInput: Click suggestion
    ExploreInput->>ExploreInput: handleSelect()
    ExploreInput->>ExploreInput: submittingRef.current=true
    ExploreInput->>ExploreInput: setShowResults(false)
    ExploreInput->>useMountAnim: open=false
    useMountAnim->>DOM: animate(exit)
    useMountAnim->>useMountAnim: setMounted(false) after animation
    Note over ExploreInput: submittingRef prevents menu from reopening when input value changes
    
    deactivate HomePage

Loading

[github-actions]

🚀 Deploying bpierre/fix-home-tweaks with ⚡ Cloudflare Pages

Latest commit:	316e48750d996afd2c25c6822665f54667e0b731
Status:	✅ Deploy successful
Preview URL:	https://5d02190b-explorer-devnet.porto.workers.dev
Branch Preview URL:

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}