Show search results asynchronously

src/components/search/search.js

@@ -1,6 +1,5 @@
 import FollowCard from '../follow_card/follow_card.vue'
 import Conversation from '../conversation/conversation.vue'
-import Status from '../status/status.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import SearchFilters from './search_filters.vue'
 import map from 'lodash/map'
@@ -20,7 +19,6 @@ const Search = {
   components: {
     FollowCard,
     Conversation,
-    Status,
     TabSwitcher,
     SearchFilters
   },
@@ -97,7 +95,7 @@ const Search = {
       this.$router.push({ name: 'search', query: { query } })
       this.$refs.searchInput.focus()
     },
-    search (query, searchType = null) {
+    async search (query, searchType = null) {
       if (!query) {
         this.loading = false
         return
@@ -118,52 +116,74 @@ const Search = {
         this.lastMediaFetchCount = 0
       }
 
-      let searchOffset
-      if (searchType === 'statuses') {
-        searchOffset = this.statusesOffset
-      } else if (searchType === 'media') {
-        searchOffset = this.mediaOffset
+      const searchTypes = searchType
+        ? [searchType]
+        : ['statuses', 'media', 'accounts', 'hashtags']
+
+      let oldStasusesLength = this.statuses.length
+      let oldMediaLength = this.media.length
+
+      let skipMediaSearch = !this.canSearchMediaPosts
+
+      for (const searchType of searchTypes) {
+        if (searchType === 'media' && skipMediaSearch) {
+          continue
+        }
+
+        let searchOffset
+        if (searchType === 'statuses') {
+          searchOffset = this.statusesOffset
+        } else if (searchType === 'media') {
+          searchOffset = this.mediaOffset
+        }
+
+        const data = await this.$store.dispatch('search', {
+          q: query,
+          resolve: true,
+          offset: searchOffset,
+          'type': searchType,
+          following:
+            'followingOnly' in this.filter && this.filter.followingOnly
+        })
+
+        for (const value of Object.values(data)) {
+          if (value.length) {
+            this.loading = true
+            break
+          }
+        }
+
+        // Always append to old results. If new results are empty, this doesn't change anything
+        this.userIds = this.userIds.concat(map(data.accounts, 'id'))
+        this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
+        if ('media' in data) {
+          this.media = uniqBy(this.media.concat(data.media), 'id')
+        }
+        this.hashtags = this.hashtags.concat(data.hashtags)
+
+        if (isNewSearch) {
+          this.currenResultTab = this.getActiveTab()
+          if (searchType === 'statuses' && data.statuses.length === 0) {
+            // safe to assume that there are no media posts
+            skipMediaSearch = true
+          }
+        }
+        this.loadedInitially = true
+
+        if (searchType === 'statuses') {
+          // Offset from whatever we already have
+          this.statusesOffset = this.statuses.length
+          // Because the amount of new statuses can actually be zero, compare to old length instead
+          this.lastStatusFetchCount = this.statuses.length - oldStasusesLength
+        }
+        if (searchType === 'media') {
+          this.mediaOffset = this.media.length
+          this.lastMediaFetchCount = this.media.length - oldMediaLength
+        }
       }
 
-      this.$store.dispatch('search', {
-        q: query,
-        resolve: true,
-        offset: searchOffset,
-        'type': searchType,
-        following:
-          'followingOnly' in this.filter && this.filter.followingOnly
-      })
-        .then(data => {
-          this.loading = false
-
-          let oldStasusesLength = this.statuses.length
-          let oldMediaLength = this.media.length
-
-          // Always append to old results. If new results are empty, this doesn't change anything
-          this.userIds = this.userIds.concat(map(data.accounts, 'id'))
-          this.statuses = uniqBy(this.statuses.concat(data.statuses), 'id')
-          if ('media' in data) {
-            this.media = uniqBy(this.media.concat(data.media), 'id')
-          }
-          this.hashtags = this.hashtags.concat(data.hashtags)
-
-          if (isNewSearch) {
-            this.currenResultTab = this.getActiveTab()
-          }
-          this.loadedInitially = true
-
-          if (!searchType || searchType === 'statuses') {
-            // Offset from whatever we already have
-            this.statusesOffset = this.statuses.length
-            // Because the amount of new statuses can actually be zero, compare to old lenght instead
-            this.lastStatusFetchCount = this.statuses.length - oldStasusesLength
-          }
-          if (!searchType || searchType === 'media') {
-            this.mediaOffset = this.media.length
-            this.lastMediaFetchCount = this.media.length - oldMediaLength
-          }
-          this.lastQuery = query
-        })
+      this.lastQuery = query
+      this.loading = false
     },
     resultCount (tabName) {
       const length = this[tabName].length

src/components/search/search.vue

@@ -72,15 +72,12 @@
     </div>
     <div class="panel-body">
       <div v-if="currenResultTab === 'statuses'">
-        <Status
+        <Conversation
           v-for="status in visibleStatuses"
           :key="status.id"
-          :collapsable="false"
-          :expandable="false"
-          :compact="false"
-          class="search-result"
-          :statusoid="status"
-          :no-heading="false"
+          :collapsable="true"
+          class="status-fadein"
+          :status-id="status.id"
         />
         <button
           v-if="!loading && loadedInitially && lastStatusFetchCount > 0"
@@ -111,15 +108,12 @@
         </div>
       </div>
       <div v-if="currenResultTab === 'media'">
-        <Status
+        <Conversation
           v-for="media in visibleMedia"
           :key="media.id"
-          :collapsable="false"
-          :expandable="false"
-          :compact="false"
-          class="search-result"
-          :statusoid="media"
-          :no-heading="false"
+          :collapsable="true"
+          class="status-fadein"
+          :status-id="media.id"
         />
         <button
           v-if="!loading && loadedInitially && lastMediaFetchCount > 0"
@@ -224,13 +218,6 @@
   }
 }
 
-.search-result {
-  box-sizing: border-box;
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
 .search-result-footer {
   border-width: 1px 0 0 0;
   border-style: solid;

src/components/status/status.js

@@ -299,7 +299,7 @@ const Status = {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const reasonsToMute = this.userIsMuted ||
         // Thread is muted
-        status.thread_muted ||
+        this.status.thread_muted ||
         // Wordfiltered
         this.muteWordHits.length > 0 ||
         // bot status

src/components/still-image/still-image.vue

@@ -7,8 +7,9 @@
   >
     <div
       v-if="animated && imageTypeLabel"
-      class="image-type-label">
-        {{ imageTypeLabel }}
+      class="image-type-label"
+    >
+      {{ imageTypeLabel }}
     </div>
     <canvas
       v-if="animated"

src/i18n/ja_pedantic.json

@@ -863,8 +863,8 @@
                     "always_drop_shadow": "ブラウザーがサポートしている場合は常に {0} が使われます。",
                     "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアバターの表示が乱れます。",
                     "drop_shadow_syntax": "{0} は、{1} パラメーターと {2} キーワードをサポートしていません。",
-                    "inset_classic": "内側の影は {0} を使います",
-                    "spread_zero": "広がりが 0 よりも大きな影は、0 と同じです"
+                    "inset_classic": "内側の影は {0} を使います。",
+                    "spread_zero": "広がりが 0 よりも大きな影は、0 と同じです。"
                 },
                 "hintV3": "影の場合は、 {0} 表記を使って他の色スロットを使うこともできます。",
                 "inset": "内側",

src/i18n/messages.js

@@ -35,6 +35,7 @@ const loaders = {
   sk: () => import('./sk.json'),
   te: () => import('./te.json'),
   uk: () => import('./uk.json'),
+  vi: () => import('./vi.json'),
   zh: () => import('./zh.json'),
   zh_Hant: () => import('./zh_Hant.json')
 }