[Glitch] Fix performance of home feed regeneration

Port front-end changes from f665901e3c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-10-06 22:11:17 +02:00 committed by Thibaut Girka
parent 61631f4751
commit 9ba67c6045
6 changed files with 49 additions and 45 deletions

View file

@ -97,7 +97,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
api(getState).get(path, { params }).then(response => { api(getState).get(path, { params }).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next'); const next = getLinks(response).refs.find(link => link.rel === 'next');
dispatch(importFetchedStatuses(response.data)); dispatch(importFetchedStatuses(response.data));
dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems)); dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems));
done(); done();
}).catch(error => { }).catch(error => {
dispatch(expandTimelineFail(timelineId, error, isLoadingMore)); dispatch(expandTimelineFail(timelineId, error, isLoadingMore));

View file

@ -1,17 +1,24 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import illustration from 'flavours/glitch/images/elephant_ui_disappointed.svg';
import classNames from 'classnames';
const MissingIndicator = () => ( const MissingIndicator = ({ fullPage }) => (
<div className='regeneration-indicator missing-indicator'> <div className={classNames('regeneration-indicator', { 'regeneration-indicator--without-header': fullPage })}>
<div> <div className='regeneration-indicator__figure'>
<div className='regeneration-indicator__figure' /> <img src={illustration} alt='' />
</div>
<div className='regeneration-indicator__label'> <div className='regeneration-indicator__label'>
<FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' /> <FormattedMessage id='missing_indicator.label' tagName='strong' defaultMessage='Not found' />
<FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' /> <FormattedMessage id='missing_indicator.sublabel' defaultMessage='This resource could not be found' />
</div>
</div> </div>
</div> </div>
); );
MissingIndicator.propTypes = {
fullPage: PropTypes.bool,
};
export default MissingIndicator; export default MissingIndicator;

View file

@ -0,0 +1,18 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import illustration from 'flavours/glitch/images/elephant_ui_working.svg';
const MissingIndicator = () => (
<div className='regeneration-indicator'>
<div className='regeneration-indicator__figure'>
<img src={illustration} alt='' />
</div>
<div className='regeneration-indicator__label'>
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
</div>
</div>
);
export default MissingIndicator;

View file

@ -6,7 +6,7 @@ import StatusContainer from 'flavours/glitch/containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import LoadGap from './load_gap'; import LoadGap from './load_gap';
import ScrollableList from './scrollable_list'; import ScrollableList from './scrollable_list';
import { FormattedMessage } from 'react-intl'; import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
export default class StatusList extends ImmutablePureComponent { export default class StatusList extends ImmutablePureComponent {
@ -81,18 +81,7 @@ export default class StatusList extends ImmutablePureComponent {
const { isLoading, isPartial } = other; const { isLoading, isPartial } = other;
if (isPartial) { if (isPartial) {
return ( return <RegenerationIndicator />;
<div className='regeneration-indicator'>
<div>
<div className='regeneration-indicator__figure' />
<div className='regeneration-indicator__label'>
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading&hellip;' />
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
</div>
</div>
</div>
);
} }
let scrollableContent = (isLoading || statusIds.size > 0) ? ( let scrollableContent = (isLoading || statusIds.size > 0) ? (

View file

@ -4,7 +4,7 @@ import MissingIndicator from 'flavours/glitch/components/missing_indicator';
const GenericNotFound = () => ( const GenericNotFound = () => (
<Column> <Column>
<MissingIndicator /> <MissingIndicator fullPage />
</Column> </Column>
); );

View file

@ -7,37 +7,27 @@
cursor: default; cursor: default;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
& > div {
width: 100%;
background: transparent;
padding-top: 0;
}
&__figure { &__figure {
background: url('~flavours/glitch/images/elephant_ui_working.svg') no-repeat center 0; &,
width: 100%; img {
height: 160px; display: block;
background-size: contain; width: auto;
position: absolute; height: 160px;
top: 50%; margin: 0;
left: 50%;
transform: translate(-50%, -50%);
}
&.missing-indicator {
padding-top: 20px + 48px;
.regeneration-indicator__figure {
background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
} }
} }
&--without-header {
padding-top: 20px + 48px;
}
&__label { &__label {
margin-top: 200px; margin-top: 30px;
strong { strong {
display: block; display: block;