diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 668dbb67..cf95f186 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -321,6 +321,22 @@ const app = new Vue({
                 'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
             }
         },
+        async getRecursive(response, sendTo) {
+            let returnData = {
+                "data": [],
+                "meta": {}
+            }
+            if(response.next) {
+                console.log("has next")
+                returnData.data.concat(response.data)
+                returnData.meta = response.meta
+                return await this.getRecursive(await response.next())
+            } else {
+                console.log("no next")
+                returnData.data.concat(response.data)
+                return returnData
+            }
+        },
         async getSearchHints() {
             if(this.search.term == "") {
                 this.search.hints = []
diff --git a/resources/cider-ui-tests/style.less b/resources/cider-ui-tests/style.less
index eb229135..680ee1a8 100644
--- a/resources/cider-ui-tests/style.less
+++ b/resources/cider-ui-tests/style.less
@@ -1117,14 +1117,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   flex-wrap: wrap;
 }
 
-.col.flex-center.artist-animation-on {
-  width: 100%;
-  display: block;
-  flex: unset;
-  margin-left: 2.3em;
-  color: whitesmoke;
-}
-
 .list-entry-header {
   display: flex;
   align-items: center;
@@ -1634,6 +1626,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     min-height: 300px;
     position: relative;
 
+    .col.flex-center.artist-animation-on {
+      width: 100%;
+      display: block;
+      flex: unset;
+      margin-left: 2.3em;
+      color: whitesmoke;
+    }
+
     .animated {
       width: 100%;
       height: 100%;
diff --git a/resources/cider-ui-tests/todo.js b/resources/cider-ui-tests/todo.js
index 80bb826c..a3fe57d5 100644
--- a/resources/cider-ui-tests/todo.js
+++ b/resources/cider-ui-tests/todo.js
@@ -66,6 +66,24 @@ await app.mk.api.recentRadioStations("",
                 "platform": "web",
                 "art[url]": "f"});
 
+// Recently Added
+await app.mk.api.library.recentlyAdded({
+    "platform": "web",
+    include: {
+        "library-albums": ["artists"],
+        "library-artists": ["catalog"]
+    },
+    fields: {
+        artists: ["url"],
+        albums: "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url"
+    },
+    includeOnly: ["catalog", "artists"],
+    limit: 25
+}, {
+    reload: !0,
+    includePagination: !0
+})
+
 // Songs 
 await app.mk.api.library.songs({limit: 100}).then((data)=>{
     console.log(data)
diff --git a/resources/cider-ui-tests/views/pages/collection-list.ejs b/resources/cider-ui-tests/views/pages/collection-list.ejs
index 595963b6..60055123 100644
--- a/resources/cider-ui-tests/views/pages/collection-list.ejs
+++ b/resources/cider-ui-tests/views/pages/collection-list.ejs
@@ -1,19 +1,35 @@
 <script type="text/x-template" id="collection-list">
     <div class="content-inner">
-
+        <h1 class="header-text">{{ title }}</h1>
+        <button v-observe-visibility="{callback: visibilityChanged}">Dummy Button</button>
     </div>
 </script>
 <script>
     Vue.component('cider-collection-list', {
         template: "#cider-collection-list",
-        props: ["data"],
+        props: ["data", "title", "kind"],
         data: function () {
             return {
-
+                canSeeTrigger: false
             }
         },
         methods: {
-
+            getNext() {
+                // if this.data.next is not null, then we can run this.data.next() and concat to this.data.data to get the next page
+                if (this.data.next) {
+                    this.data.next().then(data => {
+                        this.data.data = this.data.data.concat(data.data);
+                    });
+                }
+            },
+            visibilityChanged: function (isVisible, entry) {
+                if(isVisible) {
+                    this.canSeeTrigger = true;
+                    this.getNext();
+                }else{
+                    this.canSeeTrigger = false;
+                }
+            }
         }
     })
 </script>
\ No newline at end of file