Joystream / Joystream/atlas

Add virtualization

Open
#60 1 comment 0 reactions 0 assignees View on GitHub
community-dev performance tech
Dominant language
TypeScript
Stars
103
Forks
42
PR merge metrics
No merged PRs in 30d

Description

## Scope

Add virtualisation for

- [ ] Infinite grids
- [ ] List of notifications

## Context

Currently, all items in `Carousel` component are displayed as they are, which can cause performance problems when a lot of items are to be displayed.

We should consider adding virtualization so elements that are offscreen don't need to be rendered, possibly something like https://github.com/bvaughn/react-window

Contributor guide

Open the contributing guide

Research direction

Start by locating the Carousel component and reviewing how it currently renders all items. Compare the approach with react-window, then define virtualization for infinite grids and the list of notifications, with offscreen elements no longer rendered and both listed use cases still working.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.