Feature: Add "end" display at the end of page

pinry-spa/src/components/Pins.vue

@@ -51,6 +51,7 @@
         </div>
       </div>
       <loadingSpinner v-bind:show="status.loading"></loadingSpinner>
+      <noMore v-bind:show="!status.hasNext"></noMore>
     </section>
   </div>
 </template>
@@ -60,6 +61,7 @@ import API from './api';
 import pinHandler from './utils/PinHandler';
 import PinPreview from './PinPreview.vue';
 import loadingSpinner from './loadingSpinner.vue';
+import noMore from './noMore.vue';
 import scroll from './utils/scroll';
 
 function createImageItem(pin) {
@@ -79,6 +81,7 @@ export default {
   name: 'pins',
   components: {
     loadingSpinner,
+    noMore,
   },
   data() {
     return {

pinry-spa/src/components/noMore.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-show="show">
+    <div id="the-end">&mdash; End &mdash;</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'noMore',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#the-end {
+    font-family: 'Georgia', 'Times', 'Times New Roman', serif;
+    font-size: 1.4em;
+    font-style: italic;
+    text-align: center;
+    padding: 50px;
+}
+</style>