Updated HomePage sidebar panels to lazy load

• Updated:
- HomePage sidebar panels (WhoToFollowPanel, ListsPanel, GroupsPanel) to lazy load on scroll of 25px. Otherwise, dont load.
- WhoToFollowPanel, ListsPanel, GroupsPanel have functionality to load data once

• Added:
- List component has showLoading prop

• Removed:
- Unused IntersectionObserver code in HomePage
This commit is contained in:
mgabdev 2020-06-05 15:28:46 -04:00
parent f75570752c
commit 35c5608e1a
5 changed files with 114 additions and 42 deletions

View File

@ -21,6 +21,7 @@ export default class List extends ImmutablePureComponent {
]), ]),
onLoadMore: PropTypes.func, onLoadMore: PropTypes.func,
hasMore: PropTypes.bool, hasMore: PropTypes.bool,
showLoading: PropTypes.bool,
} }
render() { render() {
@ -30,7 +31,8 @@ export default class List extends ImmutablePureComponent {
emptyMessage, emptyMessage,
hasMore, hasMore,
size, size,
onLoadMore onLoadMore,
showLoading,
} = this.props } = this.props
const Wrapper = !!scrollKey ? ScrollableList : Dummy const Wrapper = !!scrollKey ? ScrollableList : Dummy
@ -42,6 +44,7 @@ export default class List extends ImmutablePureComponent {
hasMore={hasMore} hasMore={hasMore}
scrollKey={scrollKey} scrollKey={scrollKey}
emptyMessage={emptyMessage} emptyMessage={emptyMessage}
showLoading={showLoading}
> >
{ {
items.map((item, i) => ( items.map((item, i) => (

View File

@ -30,6 +30,7 @@ class GroupSidebarPanel extends ImmutablePureComponent {
isLazy: PropTypes.bool, isLazy: PropTypes.bool,
isSlim: PropTypes.bool, isSlim: PropTypes.bool,
onFetchGroups: PropTypes.func.isRequired, onFetchGroups: PropTypes.func.isRequired,
shouldLoad: PropTypes.bool,
} }
state = { state = {
@ -40,38 +41,39 @@ class GroupSidebarPanel extends ImmutablePureComponent {
'groupIds', 'groupIds',
'isLazy', 'isLazy',
'isSlim', 'isSlim',
'shouldLoad',
] ]
componentDidMount() {
if (!this.props.isLazy) {
this.props.onFetchGroups('member')
}
}
static getDerivedStateFromProps(nextProps, prevState) { static getDerivedStateFromProps(nextProps, prevState) {
if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) { if (nextProps.shouldLoad && !prevState.fetched) {
return { return { fetched: true }
fetched: true
}
} }
return null return null
} }
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
if (!prevState.fetched && this.state.fetched && this.props.isLazy) { if (!prevState.fetched && this.state.fetched) {
this.props.onFetchGroups('member') this.props.onFetchGroups('member')
} }
} }
componentDidMount() {
if (!this.props.isLazy) {
this.props.onFetchGroups('member')
this.setState({ fetched: true })
}
}
render() { render() {
const { intl, groupIds, slim } = this.props const { intl, groupIds, slim } = this.props
const count = groupIds.count() const { fetched } = this.state
if (count === 0) return null
const count = !!groupIds ? groupIds.count() : 0
const maxCount = slim ? 12 : 6 const maxCount = slim ? 12 : 6
if (count === 0 && fetched) return null
return ( return (
<PanelLayout <PanelLayout
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}
@ -81,9 +83,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined} footerButtonTo={count > maxCount ? '/groups/browse/member' : undefined}
noPadding={slim} noPadding={slim}
> >
<ScrollableList scrollKey='groups_panel'> <ScrollableList
scrollKey='groups_panel'
showLoading={!fetched}
>
{ {
groupIds.slice(0, maxCount).map((groupId, i) => ( groupIds && groupIds.slice(0, maxCount).map((groupId, i) => (
<GroupListItem <GroupListItem
key={`group-panel-item-${groupId}`} key={`group-panel-item-${groupId}`}
id={groupId} id={groupId}

View File

@ -24,10 +24,13 @@ export default
@connect(mapStateToProps, mapDispatchToProps) @connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
class ListsPanel extends ImmutablePureComponent { class ListsPanel extends ImmutablePureComponent {
static propTypes = { static propTypes = {
onFetchLists: PropTypes.func.isRequired, onFetchLists: PropTypes.func.isRequired,
lists: ImmutablePropTypes.list, lists: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
isLazy: PropTypes.bool,
shouldLoad: PropTypes.bool,
} }
state = { state = {
@ -36,21 +39,40 @@ class ListsPanel extends ImmutablePureComponent {
updateOnProps = [ updateOnProps = [
'lists', 'lists',
'isLazy',
'shouldLoad',
] ]
componentDidMount(prevProps, prevState, snapshot) { static getDerivedStateFromProps(nextProps, prevState) {
this.props.onFetchLists() if (nextProps.shouldLoad && !prevState.fetched) {
return { fetched: true }
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.fetched && this.state.fetched) {
this.props.onFetchLists()
}
}
componentDidMount() {
if (!this.props.isLazy) {
this.props.onFetchLists()
this.setState({ fetched: true })
}
} }
render() { render() {
const { intl, lists } = this.props const { intl, lists } = this.props
const count = lists.count() const { fetched } = this.state
if (count === 0) return null const count = !!lists ? lists.count() : 0
const maxCount = 6 const maxCount = 6
const listItems = lists.slice(0, maxCount).map((list) => ({ const listItems = !!lists && lists.slice(0, maxCount).map((list) => ({
to: `/lists/${list.get('id')}`, to: `/lists/${list.get('id')}`,
title: list.get('title'), title: list.get('title'),
})) }))
@ -65,9 +87,14 @@ class ListsPanel extends ImmutablePureComponent {
noPadding noPadding
> >
<div className={[_s.default, _s.boxShadowNone].join(' ')}> <div className={[_s.default, _s.boxShadowNone].join(' ')}>
<List scrollKey='lists_sidebar_panel' items={listItems} /> <List
scrollKey='lists_sidebar_panel'
items={listItems}
showLoading={!fetched}
/>
</div> </div>
</PanelLayout> </PanelLayout>
) )
} }
} }

View File

@ -30,14 +30,37 @@ class WhoToFollowPanel extends ImmutablePureComponent {
fetchSuggestions: PropTypes.func.isRequired, fetchSuggestions: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
suggestions: ImmutablePropTypes.list.isRequired, suggestions: ImmutablePropTypes.list.isRequired,
isLazy: PropTypes.bool,
}
state = {
fetched: !this.props.isLazy,
} }
updateOnProps = [ updateOnProps = [
'suggestions', 'suggestions',
'isLazy',
'shouldLoad',
] ]
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.shouldLoad && !prevState.fetched) {
return { fetched: true }
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.fetched && this.state.fetched) {
this.props.fetchSuggestions()
}
}
componentDidMount() { componentDidMount() {
this.props.fetchSuggestions() if (!this.props.isLazy) {
this.props.fetchSuggestions()
}
} }
render() { render() {

View File

@ -1,10 +1,9 @@
import { Fragment } from 'react' import { Fragment } from 'react'
import throttle from 'lodash.throttle'
import { openModal } from '../actions/modal' import { openModal } from '../actions/modal'
import { defineMessages, injectIntl } from 'react-intl' import { defineMessages, injectIntl } from 'react-intl'
import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants' import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
import { me } from '../initial_state' import { me } from '../initial_state'
// import IntersectionObserverArticle from '../components/intersection_observer_article'
// import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
import PageTitle from '../features/ui/util/page_title' import PageTitle from '../features/ui/util/page_title'
import GroupsPanel from '../components/panel/groups_panel' import GroupsPanel from '../components/panel/groups_panel'
import ListsPanel from '../components/panel/lists_panel' import ListsPanel from '../components/panel/lists_panel'
@ -47,23 +46,37 @@ class HomePage extends PureComponent {
isPro: PropTypes.bool, isPro: PropTypes.bool,
} }
// intersectionObserverWrapper = new IntersectionObserverWrapper() state = {
lazyLoaded: false,
}
// componentDidMount() { componentDidMount() {
// this.attachIntersectionObserver() this.window = window
// } this.documentElement = document.scrollingElement || document.documentElement
// componentWillUnmount() { this.window.addEventListener('scroll', this.handleScroll)
// this.detachIntersectionObserver() }
// }
// attachIntersectionObserver() { componentWillUnmount() {
// this.intersectionObserverWrapper.connect() this.detachScrollListener()
// } }
// detachIntersectionObserver() { detachScrollListener = () => {
// this.intersectionObserverWrapper.disconnect() this.window.removeEventListener('scroll', this.handleScroll)
// } }
handleScroll = throttle(() => {
if (this.window) {
const { scrollTop } = this.documentElement
if (scrollTop > 25 && !this.state.lazyLoaded) {
this.setState({ lazyLoaded: true })
this.detachScrollListener()
}
}
}, 150, {
trailing: true,
})
render() { render() {
const { const {
@ -73,6 +86,7 @@ class HomePage extends PureComponent {
onOpenHomePageSettingsModal, onOpenHomePageSettingsModal,
isPro, isPro,
} = this.props } = this.props
const { lazyLoaded } = this.state
return ( return (
<DefaultLayout <DefaultLayout
@ -89,9 +103,9 @@ class HomePage extends PureComponent {
<ProgressPanel /> <ProgressPanel />
<ProPanel isPro={isPro} /> <ProPanel isPro={isPro} />
<TrendsPanel /> <TrendsPanel />
<ListsPanel /> <ListsPanel isLazy shouldLoad={lazyLoaded} />
<WhoToFollowPanel /> <WhoToFollowPanel isLazy shouldLoad={lazyLoaded} />
<GroupsPanel /> <GroupsPanel isLazy shouldLoad={lazyLoaded} />
<LinkFooter /> <LinkFooter />
</Fragment> </Fragment>
)} )}