From 504d1ed6849299e2c6b2c93e76a397fc42f89370 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 8 Jul 2022 15:17:24 -0400
Subject: [PATCH] Implement PR feedback

---
 .../learn/assets/src/views/TopicsPage.vue     | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
index bd16932ed0a..66371984665 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -202,6 +202,16 @@
             >
               {{ $tr('showMore') }}
             </KButton>
+            <div v-else-if="topicMore" class="end-button-block">
+              <KButton
+                v-if="!topicMoreLoading"
+                :text="coreString('viewMoreAction')"
+                appearance="raised-button"
+                :disabled="topicMoreLoading"
+                @click="handleLoadMoreInTopic"
+              />
+              <KCircularLoader v-else />
+            </div>
           </div>
           <div v-else-if="!searchLoading">
             <h2 class="results-title">
@@ -529,17 +539,15 @@
         return this.contents.filter(content => content.kind !== ContentNodeKinds.TOPIC);
       },
       resourcesDisplayed() {
+        let displayed;
         // if no folders are shown at this level, show more resources to fill the space
-        if (this.topics.length == 0 && !this.showMoreResources) {
-          return this.resources.slice(0, this.childrenToDisplay * 2);
-          // if there are topics, and the user has not clicked show more
-          // default to just the preview number
-        } else if (this.topics.length > 0 && !this.showMoreResources) {
-          return this.resources.slice(0, this.childrenToDisplay);
+        if (!this.showMoreResources) {
+          displayed = this.resources.slice(0, this.childrenToDisplay);
           // otherwise display all resources
         } else {
-          return this.resources;
+          displayed = this.resources;
         }
+        return displayed;
       },
       moreResources() {
         return this.resourcesDisplayed.length < this.resources.length;