Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ITO lazy load history list #3524

Merged
merged 6 commits into from
Jun 30, 2021
Merged

Conversation

zhouhanseng
Copy link
Contributor

@zhouhanseng zhouhanseng commented Jun 29, 2021

closes #3414

lazy.load.list.mov

@zhouhanseng zhouhanseng marked this pull request as ready for review June 29, 2021 09:40
@zhouhanseng zhouhanseng changed the title feat: lazy load list feat: ITO lazy load history list Jun 29, 2021
import { useLayoutEffect, RefObject, useCallback } from 'react'
import { debounce } from 'lodash-es'

export function useScrollBottomEvent(ref: RefObject<HTMLDivElement>, cb: () => void) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Append an element at the bottom of the container, as it appears trigger the event. Maybe this is a little bit complex than the current implementation.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To use IntersectionObserver, we also add a new element at the bottom and observe its distance to the viewport. It's better than watching scroll event and calculate the distance by yourself.

You can use this: https://github.com/streamich/react-use/blob/master/docs/useIntersection.md

@AinuX
Copy link
Collaborator

AinuX commented Jun 30, 2021

Test passed with build (29769)

@zhouhanseng zhouhanseng merged commit 119ee53 into develop Jun 30, 2021
@zhouhanseng zhouhanseng deleted the hancheng/scroll-loading-list branch June 30, 2021 09:58
yanzhihong23 added a commit that referenced this pull request Jul 1, 2021
* develop: (25 commits)
  chore: set gh-actions name (#3542)
  Hotfix/1.33.2 to develop (#3537)
  chore: github bot auto add conflict label to pr (#3539)
  fix: add notistack for theme (#3534)
  feat: add new token selector and  show balance (#3482)
  feat: ITO lazy load history list (#3524)
  chore: clean blob (#3528)
  chore: clean file reader (#3527)
  feat: migrate VCent plugin to new plugin infra (#3497)
  chore: remove unused code (#3525)
  fix: handle change (#3523)
  fix: file service label (#3526)
  feat: migrate Transak plugin to new plugin infra (#3496)
  chore: clean event bound (#3522)
  refactor: ito new proxy contract (#3487)
  feat: migrate Polls plugin to new plugin infra (#3500)
  chore: clean jsx (#3520)
  chore: fix storybook build issue (#3380)
  refactor: remove web3-shared dependency in shared package (#3519)
  chore: update github bot configuration (#3516)
  ...
Jack-Works pushed a commit that referenced this pull request Jul 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Demand] Find a tech solution to do lazy loading list
5 participants