Brand Projects: draw each card's preview only when it scrolls into view

Open
  • Is something wrong?
#537 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
78/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, typescript
Domain
accessibility, frontend, performance

Research direction

Start with components/projects/project-card.tsx and lib/projects/preview.ts to trace how each card preview is drawn, then read hooks/use-windowed-grid.ts and tests/e2e/projects-list.spec.ts. Use the end-to-end tests to check that previews render as cards approach the viewport while card height and keyboard and screen reader access stay unchanged. Done when the 150 project test confirms fewer previews on first view and the projects end-to-end tests pass.

Written by the indexing model from the issue text.

Description

area: projects difficulty: medium enhancement help wanted performance v2.0.0

Summary

Each project card renders a small brand preview from the whole snapshot. Thirty cards are drawn first and more as the end comes into view, but each card still renders its preview at once, including fonts and gradients that are off screen in the grid.

Part of the 2.0.0 plan: fewer, better and fully tested studios, on a calmer and faster site.

Where to look

  • components/projects/project-card.tsx and lib/projects/preview.ts
  • hooks/use-windowed-grid.ts
  • tests/e2e/projects-list.spec.ts

Behaviour

  • Draw a card's preview (not its name and buttons) when it is within a screen of the view, using an IntersectionObserver.
  • Keep a fixed card height so nothing shifts.
  • Keep keyboard and screen reader access to every card unchanged.

Acceptance criteria

  • With 150 projects, fewer previews are drawn on first view, counted by a test.
  • No layout shift is added.
  • The projects end-to-end tests pass.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
6h 9m
Merged PRs (30d)
73

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.