Remove 'trends.scss'

app/soapbox/features/placeholder/components/placeholder-hashtag.tsx

@@ -7,12 +7,8 @@ const PlaceholderHashtag: React.FC = () => {
   const length = randomIntFromInterval(15, 30);
 
   return (
-    <div className='placeholder-hashtag'>
-      <div className='trends__item'>
-        <div className='trends__item__name'>
-          {generateText(length)}
-        </div>
-      </div>
+    <div className='animate-pulse text-primary-200 dark:text-primary-700'>
+      <p>{generateText(length)}</p>
     </div>
   );
 };

app/styles/application.scss

@@ -46,7 +46,6 @@
 @import 'components/search';
 @import 'components/react-toggle';
 @import 'components/still-image';
-@import 'components/trends';
 @import 'components/profile-media-panel';
 @import 'components/profile-info-panel';
 @import 'components/spoiler-button';

app/styles/components/trends.scss

@@ -1,78 +0,0 @@
-.trends {
-  &__header {
-    color: var(--primary-text-color);
-    background: var(--brand-color--faint);
-    border-bottom: 1px solid var(--brand-color--med);
-    font-weight: 500;
-    padding: 15px;
-    font-size: 16px;
-    cursor: default;
-
-    .fa {
-      display: inline-block;
-      margin-right: 5px;
-    }
-  }
-
-  &__item {
-    display: flex;
-    align-items: center;
-    padding: 15px;
-    border-bottom: 1px solid var(--brand-color--med);
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    &__name {
-      flex: 1 1 auto;
-      color: var(--primary-text-color);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 13px;
-
-      strong {
-        font-weight: bold;
-      }
-
-      a {
-        color: var(--primary-text-color--faint);
-        text-decoration: none;
-        font-size: 14px;
-        font-weight: 500;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:hover,
-        &:focus,
-        &:active {
-          span {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-
-    &__current {
-      flex: 0 0 auto;
-      width: 100px;
-      font-size: 24px;
-      line-height: 36px;
-      font-weight: 500;
-      text-align: center;
-      color: var(--primary-text-color--faint);
-    }
-
-    &__sparkline {
-      flex: 0 0 auto;
-      width: 50px;
-
-      path {
-        stroke: var(--highlight-text-color) !important;
-      }
-    }
-  }
-}

app/styles/placeholder.scss

@@ -1,4 +1,3 @@
-.placeholder-hashtag,
 .media-gallery--placeholder {
   position: relative;
 
@@ -32,11 +31,6 @@
   100% { background-position-x: 0; }
 }
 
-.placeholder-hashtag .trends__item__name {
-  color: var(--brand-color);
-  opacity: 0.1;
-}
-
 .chat-list-item--placeholder .chat__last-message {
   letter-spacing: -1px;
   color: var(--brand-color) !important;