Change animation on feed generation screen in web UI (#33311)

app/javascript/mastodon/components/regeneration_indicator.jsx

@@ -1,18 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import illustration from '@/images/elephant_ui_working.svg';
-
-const RegenerationIndicator = () => (
-  <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 RegenerationIndicator;

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 = () => (
+  <div className='regeneration-indicator'>
+    <GIF
+      src='/loading.gif'
+      staticSrc='/loading.png'
+      className='regeneration-indicator__figure'
+    />
+
+    <div className='regeneration-indicator__label'>
+      <strong>
+        <FormattedMessage
+          id='regeneration_indicator.preparing_your_home_feed'
+          defaultMessage='Preparing your home feed…'
+        />
+      </strong>
+      <FormattedMessage
+        id='regeneration_indicator.please_stand_by'
+        defaultMessage='Please stand by.'
+      />
+    </div>
+  </div>
+);

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';

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",

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;
     }
   }
 }