diff --git a/app/javascript/flavours/glitch/components/load_gap.js b/app/javascript/flavours/glitch/components/load_gap.js
new file mode 100644
index 00000000000..012303ae1eb
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/load_gap.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+ load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+@injectIntl
+export default class LoadGap extends React.PureComponent {
+
+ static propTypes = {
+ disabled: PropTypes.bool,
+ maxId: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ handleClick = () => {
+ this.props.onClick(this.props.maxId);
+ }
+
+ render () {
+ const { disabled, intl } = this.props;
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/components/status_list.js b/app/javascript/flavours/glitch/components/status_list.js
index fac745986ce..33bc7a95922 100644
--- a/app/javascript/flavours/glitch/components/status_list.js
+++ b/app/javascript/flavours/glitch/components/status_list.js
@@ -4,28 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import StatusContainer from 'flavours/glitch/containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
-import LoadMore from './load_more';
+import LoadGap from './load_gap';
import ScrollableList from './scrollable_list';
import { FormattedMessage } from 'react-intl';
-class LoadGap extends ImmutablePureComponent {
-
- static propTypes = {
- disabled: PropTypes.bool,
- maxId: PropTypes.string,
- onClick: PropTypes.func.isRequired,
- };
-
- handleClick = () => {
- this.props.onClick(this.props.maxId);
- }
-
- render () {
- return ;
- }
-
-}
-
export default class StatusList extends ImmutablePureComponent {
static propTypes = {
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index f1319af45eb..266d6807d9e 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -17,7 +17,7 @@ import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
-import LoadMore from 'flavours/glitch/components/load_more';
+import LoadGap from 'flavours/glitch/components/load_gap';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -28,24 +28,6 @@ const getNotifications = createSelector([
state => state.getIn(['notifications', 'items']),
], (excludedTypes, notifications) => notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type'))));
-class LoadGap extends React.PureComponent {
-
- static propTypes = {
- disabled: PropTypes.bool,
- maxId: PropTypes.string,
- onClick: PropTypes.func.isRequired,
- };
-
- handleClick = () => {
- this.props.onClick(this.props.maxId);
- }
-
- render () {
- return ;
- }
-
-}
-
const mapStateToProps = state => ({
notifications: getNotifications(state),
localSettings: state.get('local_settings'),
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 9d1022416a0..0fa940766d9 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -848,6 +848,10 @@
}
}
+.load-gap {
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
+}
+
.missing-indicator {
padding-top: 20px + 48px;