Skip to content

[FEATURE] Add fade-in animation for issue cards #183

Description

@ascender1729

Description

Add smooth fade-in animation when issue cards appear in the results list.

Why Needed

  • Improves perceived performance
  • Polished, professional feel
  • Guides user attention to new content

Implementation Details

  • Use CSS animation or Svelte transitions
  • Stagger animation for sequential cards
  • Keep animation subtle and fast (200-300ms)
  • Respect prefers-reduced-motion

Files to Modify

  • src/components/results/IssueCard.svelte
  • src/components/results/ResultsContainer.svelte

Code Example

<script>
  import { fade, fly } from 'svelte/transition';
</script>

{#each issues as issue, i}
  <div 
    in:fly={{ y: 20, delay: i * 50, duration: 300 }}
    class="issue-card"
  >
    <IssueCard {issue} />
  </div>
{/each}

Acceptance Criteria

  • Cards animate in smoothly
  • Staggered timing for multiple cards
  • Respects prefers-reduced-motion
  • No layout shift during animation

Time Estimates

  • With AI: 135 minutes
  • Without AI: 900 minutes

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions