mirror of https://github.com/Siphonay/mastodon
[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:
parent
61631f4751
commit
9ba67c6045
|
@ -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));
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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…' />
|
||||||
|
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default MissingIndicator;
|
|
@ -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…' />
|
|
||||||
<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) ? (
|
||||||
|
|
|
@ -4,7 +4,7 @@ import MissingIndicator from 'flavours/glitch/components/missing_indicator';
|
||||||
|
|
||||||
const GenericNotFound = () => (
|
const GenericNotFound = () => (
|
||||||
<Column>
|
<Column>
|
||||||
<MissingIndicator />
|
<MissingIndicator fullPage />
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue