diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
new file mode 100644
index 00000000..0f72ffd6
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import filter from 'lodash/filter'
+import './with_load_more.scss'
+
+const withLoadMore = (Component, fetchEntries, getEntries) => {
+ const originalProps = Component.props || []
+ const props = filter(originalProps, v => v !== 'entries')
+
+ return Vue.component('withLoadMore', {
+ render (createElement) {
+ return (
+
+
+
+
+ )
+ },
+ props,
+ data () {
+ return {
+ loading: false,
+ bottomedOut: false,
+ error: false
+ }
+ },
+ computed: {
+ entries () {
+ return getEntries(this.$props, this.$store) || []
+ }
+ },
+ created () {
+ window.addEventListener('scroll', this.scrollLoad)
+ if (this.entries.length === 0) {
+ this.fetch()
+ }
+ },
+ destroyed () {
+ window.removeEventListener('scroll', this.scrollLoad)
+ },
+ methods: {
+ fetch () {
+ if (!this.loading) {
+ this.loading = true
+ fetchEntries(this.$props, this.$store).then((newEntries) => {
+ this.error = false
+ this.loading = false
+ this.bottomedOut = newEntries.length === 0
+ }).catch(() => {
+ this.error = true
+ this.loading = false
+ })
+ }
+ },
+ scrollLoad (e) {
+ const bodyBRect = document.body.getBoundingClientRect()
+ const height = Math.max(bodyBRect.height, -(bodyBRect.y))
+ if (this.loading === false &&
+ this.bottomedOut === false &&
+ this.$el.offsetHeight > 0 &&
+ (window.innerHeight + window.pageYOffset) >= (height - 750)
+ ) {
+ this.fetch()
+ }
+ }
+ }
+ })
+}
+
+export default withLoadMore
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
new file mode 100644
index 00000000..af1e1fe8
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -0,0 +1,10 @@
+.with-load-more {
+ &-footer {
+ padding: 10px;
+ text-align: center;
+ }
+
+ .error {
+ font-size: 14px;
+ }
+}
\ No newline at end of file