optimize menu pagination performance

src/components/active-color.js

@@ -15,6 +15,7 @@ AFRAME.registerComponent('active-color', {
 
   update: function () {
     var el = this.el;
+
     if (this.data.active) {
       el.setAttribute('material', 'color', this.data.color);
       el.setAttribute('material', 'opacity', 1);

src/components/search.js

@@ -11,10 +11,14 @@ var algolia = client.initIndex('supersaber');
 AFRAME.registerComponent('search', {
   init: function() {
     this.eventDetail = {results: []};
-    this.queryObject = {hitsPerPage: 30, query: ''};
+    this.popularHits = null;
+    this.queryObject = {hitsPerPage: 100, query: ''};
 
     // Populate popular.
     this.search('');
+
+    // Less hits on normal searches.
+    this.queryObject.hitsPerPage = 30;
   },
 
   superkeyboardchange: bindEvent(function (evt) {
@@ -22,8 +26,17 @@ AFRAME.registerComponent('search', {
   }),
 
   search: function (query) {
+    // Use cached for popular hits.
+    if (!query && this.popularHits) {
+      this.eventDetail.results = popularHits;
+      this.el.sceneEl.emit('searchresults', this.eventDetail);
+      return;
+    }
+
     this.queryObject.query = query;
     algolia.search(this.queryObject, (err, content) => {
+      // Cache popular hits.
+      if (!query) { this.popularHits = content.hits; }
       this.eventDetail.results = content.hits;
       this.el.sceneEl.emit('searchresults', this.eventDetail);
     });
@@ -40,3 +53,28 @@ AFRAME.registerComponent('search-result-list', {
                          false);
   }),
 });
+
+AFRAME.registerComponent('search-result-image', {
+  dependencies: ['material'],
+
+  schema: {
+    id: {type: 'string'}
+  },
+
+  init: function () {
+    this.materialUpdateObj = {color: '#223'};
+
+    this.el.addEventListener('materialtextureloaded', () => {
+      this.el.setAttribute('material', 'color', '#FFF');
+    });
+  },
+
+  update: function () {
+    this.el.components.material.material.map = null;
+    this.el.components.material.material.needsUpdate = true;
+
+    this.materialUpdateObj.src =
+      `https://s3-us-west-2.amazonaws.com/supersaber/${this.data.id}-image.jpg`
+    this.el.setAttribute('material', this.materialUpdateObj);
+  },
+});

src/components/song-preview.js

@@ -74,7 +74,9 @@ AFRAME.registerComponent('song-preview-system', {
     if (this.audioStore[challengeId]) { return; }
     const audio = document.createElement('audio');
     audio.crossOrigin = 'anonymous';
-    audio.currentTime = previewStartTime;
+    audio.addEventListener('canplaythrough', () => {
+      audio.currentTime = previewStartTime;
+    }, false);
     audio.volume = 0;
     this.audioStore[challengeId] = audio;
 

src/components/song.js

@@ -23,7 +23,9 @@ AFRAME.registerComponent('song', {
     // Changed challenge.
     if (data.challengeId !== oldData.challengeId) {
       let songUrl = utils.getS3FileUrl(data.challengeId, 'song.ogg');
-      this.audio.currentTime = 0;
+      this.audio.addEventListener('canplaythrough', () => {
+        this.audio.currentTime = 0;
+      }, false);
       this.audio.src = data.challengeId ? songUrl : '';
     }