2 files changed, 38 insertions, 0 deletions
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 65e689c896..d5392fb8cd 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -45,6 +45,7 @@ import uiSelect from './ui/select.vue';
 import uiInfo from './ui/info.vue';
 import uiMargin from './ui/margin.vue';
 import uiHr from './ui/hr.vue';
+import uiPagination from './ui/pagination.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
@@ -93,5 +94,6 @@ Vue.component('ui-select', uiSelect);
 Vue.component('ui-info', uiInfo);
 Vue.component('ui-margin', uiMargin);
 Vue.component('ui-hr', uiHr);
+Vue.component('ui-pagination', uiPagination);
 Vue.component('form-button', formButton);
 Vue.component('form-radio', formRadio);
diff --git a/src/client/app/common/views/components/ui/pagination.vue b/src/client/app/common/views/components/ui/pagination.vue
new file mode 100644
index 0000000000..67aa89d369
--- /dev/null
+++ b/src/client/app/common/views/components/ui/pagination.vue
@@ -0,0 +1,36 @@
+<template>
+<div class="mwermpua" v-if="!fetching">
+	<sequential-entrance animation="entranceFromTop" delay="25">
+		<slot :items="items"></slot>
+	</sequential-entrance>
+	<div class="more" v-if="more">
+		<ui-button @click="fetchMore()">{{ $t('@.load-more') }}</ui-button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import paging from '../../../scripts/paging';
+
+export default Vue.extend({
+	mixins: [
+		paging({
+			captureWindowScroll: false,
+		}),
+	],
+
+	props: {
+		pagination: {
+			required: true
+		},
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.mwermpua
+	> .more
+		margin-top 16px
+
+</style>