Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits)
  fallback if shadows aren't defined
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Italian)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Italian)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  ...

1 files changed, 26 insertions, 8 deletions

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 6142f513..671b2b6f 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_load_more.scss'
 
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withLoadMore = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
@@ -19,12 +29,8 @@ const withLoadMore = ({
       return {
         loading: false,
         bottomedOut: false,
-        error: false
-      }
-    },
-    computed: {
-      entries () {
-        return select(this.$props, this.$store) || []
+        error: false,
+        entries: []
       }
     },
     created () {
@@ -38,6 +44,11 @@ const withLoadMore = ({
       destroy && destroy(this.$props, this.$store)
     },
     methods: {
+      // Entries is not a computed because computed can't track the dynamic
+      // selector for changes and won't trigger after fetch.
+      updateEntries () {
+        this.entries = select(this.$props, this.$store) || []
+      },
       fetchEntries () {
         if (!this.loading) {
           this.loading = true
@@ -51,6 +62,9 @@ const withLoadMore = ({
               this.loading = false
               this.error = true
             })
+            .finally(() => {
+              this.updateEntries()
+            })
         }
       },
       scrollLoad (e) {
@@ -81,8 +95,12 @@ const withLoadMore = ({
             {children}
           </WrappedComponent>
           <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {this.error &&
+              <button onClick={this.fetchEntries} class="button-unstyled -link -fullwidth alert error">
+                {this.$t('general.generic_error')}
+              </button>
+            }
+            {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
             {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
         </div>