Pass down slots into wrapped components

2 files changed, 36 insertions, 18 deletions

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 459e026c..e9265d2a 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -18,11 +18,15 @@ const withLoadMore = ({
           ...this.$props,
           [childPropName]: this.entries
         },
-        on: this.$listeners
+        on: this.$listeners,
+        scopedSlots: this.$scopedSlots
       }
+      const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
       return (
         <div class="with-load-more">
-          <WrappedComponent {...props} />
+          <WrappedComponent {...props}>
+            {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"/>}
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 960c6d71..42ede7be 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -13,25 +13,39 @@ const withSubscription = ({
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
+    props: [
+      ...props,
+      'refresh'               // boolean saying to force-fetch data whenever created
+    ],
     render (createElement) {
-      const props = {
-        props: {
-          ...omit(this.$props, 'refresh'),
-          [childPropName]: this.fetchedData
-        },
-        on: this.$listeners
-      }
-      return (
-        <div class="with-subscription">
-          {!this.error && !this.loading && <WrappedComponent {...props} />}
-          <div class="with-subscription-footer">
-            {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...omit(this.$props, 'refresh'),
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
           </div>
-        </div>
-      )
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
     },
-    props: [...props, 'refresh'],
     data () {
       return {
         loading: false,