diff --git a/app/javascript/mastodon/components/regeneration_indicator.jsx b/app/javascript/mastodon/components/regeneration_indicator.jsx deleted file mode 100644 index d42a7d7c72..0000000000 --- a/app/javascript/mastodon/components/regeneration_indicator.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import { FormattedMessage } from 'react-intl'; - -import illustration from '@/images/elephant_ui_working.svg'; - -const RegenerationIndicator = () => ( -
-
- -
- -
- - -
-
-); - -export default RegenerationIndicator; diff --git a/app/javascript/mastodon/components/regeneration_indicator.tsx b/app/javascript/mastodon/components/regeneration_indicator.tsx new file mode 100644 index 0000000000..e26b93eb4f --- /dev/null +++ b/app/javascript/mastodon/components/regeneration_indicator.tsx @@ -0,0 +1,26 @@ +import { FormattedMessage } from 'react-intl'; + +import { GIF } from './gif'; + +export const RegenerationIndicator: React.FC = () => ( +
+ + +
+ + + + +
+
+); diff --git a/app/javascript/mastodon/components/status_list.jsx b/app/javascript/mastodon/components/status_list.jsx index c6cacbd2b2..3091e2a2a0 100644 --- a/app/javascript/mastodon/components/status_list.jsx +++ b/app/javascript/mastodon/components/status_list.jsx @@ -6,7 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { debounce } from 'lodash'; import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines'; -import RegenerationIndicator from 'mastodon/components/regeneration_indicator'; +import { RegenerationIndicator } from 'mastodon/components/regeneration_indicator'; import { InlineFollowSuggestions } from 'mastodon/features/home_timeline/components/inline_follow_suggestions'; import StatusContainer from '../containers/status_container'; diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index bdc4cadaa8..8fe837b141 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -697,8 +697,8 @@ "privacy_policy.title": "Privacy Policy", "recommended": "Recommended", "refresh": "Refresh", - "regeneration_indicator.label": "Loading…", - "regeneration_indicator.sublabel": "Your home feed is being prepared!", + "regeneration_indicator.please_stand_by": "Please stand by.", + "regeneration_indicator.preparing_your_home_feed": "Preparing your home feed…", "relative_time.days": "{number}d", "relative_time.full.days": "{number, plural, one {# day} other {# days}} ago", "relative_time.full.hours": "{number, plural, one {# hour} other {# hours}} ago", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index d4e507ce51..345753f124 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4088,10 +4088,7 @@ a.status-card { } .regeneration-indicator { - text-align: center; - font-size: 16px; - font-weight: 500; - color: $dark-text-color; + color: $darker-text-color; border: 1px solid var(--background-border-color); border-top: 0; cursor: default; @@ -4103,31 +4100,26 @@ a.status-card { padding: 20px; &__figure { - &, - img { - display: block; - width: auto; - height: 160px; - margin: 0; - } - } - - &--without-header { - padding-top: 20px + 48px; + display: block; + width: 100%; + height: auto; + max-width: 350px; + margin-top: -50px; } &__label { - margin-top: 30px; + text-align: center; + font-size: 16px; strong { + font-weight: 500; display: block; margin-bottom: 10px; - color: $dark-text-color; + color: $darker-text-color; } span { font-size: 15px; - font-weight: 400; } } } diff --git a/public/loading.gif b/public/loading.gif new file mode 100755 index 0000000000..b3e1dbef8f Binary files /dev/null and b/public/loading.gif differ diff --git a/public/loading.png b/public/loading.png new file mode 100755 index 0000000000..6a20cbfcb6 Binary files /dev/null and b/public/loading.png differ