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:
parent
f75570752c
commit
35c5608e1a
|
@ -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) => (
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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() {
|
||||||
|
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue