diff --git a/packages/app-frontend/src/App.vue b/packages/app-frontend/src/App.vue
index 4aa286af7e74b367125231789885ec5a894c850d..e25d3837694c1dbd0cc7ed003fee4bd6c8a95175 100644
--- a/packages/app-frontend/src/App.vue
+++ b/packages/app-frontend/src/App.vue
@@ -165,7 +165,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import { SPECIAL_TOKENS } from '@utils/util'
 import Keyboard from '@front/mixins/keyboard'
 import GroupDropdown from '@front/components/GroupDropdown.vue'
@@ -238,6 +238,10 @@ export default {
       view: state => state.view
     }),
 
+    ...mapGetters('components', {
+      totalComponentCount: 'totalCount'
+    }),
+
     specialTokens () {
       return SPECIAL_TOKENS
     },
@@ -274,10 +278,12 @@ export default {
     this.mediaQuery = window.matchMedia('(min-width: 685px)')
     this.switchView(this.mediaQuery)
     this.mediaQuery.addListener(this.switchView)
+    this.autoRefreshTimer = setInterval(this.shouldAutoRefresh, 1000)
   },
 
   destroyed () {
     this.mediaQuery.removeListener(this.switchView)
+    clearInterval(this.autoRefreshTimer)
   },
 
   methods: {
@@ -291,6 +297,12 @@ export default {
       })
     },
 
+    shouldAutoRefresh () {
+      if (this.totalComponentCount === 0) {
+        this.refresh()
+      }
+    },
+
     switchView (mediaQueryEvent) {
       this.$store.commit(
         'SWITCH_VIEW',