トレンド周りを修正

frontend/src/components/TrendSection.vue

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
 import { reactionIcons } from '@/features/reactions';
+import twemoji from 'twemoji';
 import { ref } from 'vue';
 
 const emits = defineEmits<{
   (e: 'change', id: number): void;
 }>();
 const value = ref<number>(0);
+
+const vTwemoji = {
+  mounted: (el: HTMLElement) => {
+    el.innerHTML = twemoji.parse(el.innerHTML, {
+      className: 'twemoji',
+    });
+  },
+};
 </script>
 
 <template>
@@ -20,12 +29,19 @@ const value = ref<number>(0);
         v-model="value"
         @change="emits('change', value)"
       />
-      <label :for="`radio${id}`">{{ reaction }}️</label>
+      <label :for="`radio${id}`" v-twemoji>{{ reaction }}️</label>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+:global(.icon-area .twemoji) {
+  height: 1.2em;
+  width: 1.2em;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
+}
+
 .icon-area {
   display: flex;
 }

frontend/src/views/TrendingView.vue

@@ -8,8 +8,13 @@ import { convertReactions } from '@/features/reactions';
 
 const target = ref<number>(0);
 const timeline = ref<GetTrendResponse>();
-const loadPost = () => {
-  getTrend(target.value).then((e) => (timeline.value = e));
+const loading = ref(false);
+const loadPost = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  const data = await getTrend(target.value);
+  timeline.value = data;
+  loading.value = false;
 };
 loadPost();
 </script>
@@ -24,17 +29,19 @@ loadPost();
         }
       "
     />
-    <div v-for="post in timeline" :key="post.id">
-      <Post
-        class="trending-post"
-        :content="post.converted_message"
-        :originalContent="post.original_message"
-        :date="new Date(post.created_at)"
-        :name="post.user_name"
-        :reactions="convertReactions(post.reactions, post.my_reactions)"
-        :id="post.id"
-        @react="loadPost"
-      />
+    <div class="timeline" :class="{ loading }">
+      <div v-for="post in timeline" :key="post.id">
+        <Post
+          class="trending-post"
+          :content="post.converted_message"
+          :originalContent="post.original_message"
+          :date="new Date(post.created_at)"
+          :name="post.user_name"
+          :reactions="convertReactions(post.reactions, post.my_reactions)"
+          :id="post.id"
+          @react="loadPost"
+        />
+      </div>
     </div>
   </MainLayout>
 </template>
@@ -43,4 +50,9 @@ loadPost();
 .trending-post {
   border-bottom: 1px solid var(--dimmed-border-color);
 }
+
+.timeline.loading {
+  pointer-events: none;
+  opacity: 0.5;
+}
 </style>