Comment embeds: reduce reflow

r2/r2/public/static/js/embed.js

@@ -80,6 +80,39 @@
       }, data);
     }
 
+    function serializeOptions(options) {
+      return JSON.stringify(_.pick(options, 'live', 'parent'));
+    }
+
+    function initFrame(popup, options) {
+      var $preview = popup.$.find('#embed-preview');
+      var serializedOptions = typeof options !== 'string' ?
+        serializeOptions(options) : options;
+
+      window.rembeddit.init(function() {
+        var height = 0;
+
+        var reflow = setInterval(function() {
+          var $next = $preview.find('iframe:last-child')
+          var newHeight = $next.height();
+
+          if (height !== newHeight) {
+            height = newHeight;
+          } else {
+            clearInterval(reflow);
+
+            $preview.find('iframe')
+                    .hide()
+                  .last()
+                    .show()
+                    .attr('data-options', serializedOptions);
+
+            $preview.css('height', 'auto');
+          }
+        }, 100);
+      });
+    }
+
     $('body').on('click', '.embed-comment', function(e) {
       var $el = $(e.target);
       var data = $el.data();
@@ -104,17 +137,23 @@
 
         var data = $el.data();
         var options = getEmbedOptions(data);
+        var serializedOptions = serializeOptions(options);
         var html = options.html;
         var height = $preview.height();
 
         $textarea.val(html + options.scripts);
 
         if ($option.data('rerender') !== false) {
-          $preview.height(height).html(html);
+          var selector = '[data-options="' + r.utils.escapeSelector(serializedOptions) + '"]';
+          var $cached = $preview.find(selector);
 
-          window.rembeddit.init(function () {
-            $preview.css({height: 'auto'});
-          });
+          if ($cached.length) {
+            $cached.show().siblings().hide();
+          } else {
+            $preview.height(height).append($(html).hide());
+
+            initFrame(popup, serializedOptions);
+          }
         }
       });
 
@@ -126,8 +165,12 @@
         popup.$.remove();
       });
 
+      popup.on('show.r.popup', function() {
+        $preview.find('.reddit-embed').hide();
+      });
+
       popup.on('opened.r.popup', function() {
-        window.rembeddit.init();
+        initFrame(popup, embedOptions);
       });
 
       popup.show();

r2/r2/public/static/js/embed/comment-embed.js

@@ -59,6 +59,7 @@
         return;
       }
 
+      iframe.height = 0;
       iframe.width = '100%';
       iframe.scrolling = 'no';
       iframe.frameBorder = 0;
@@ -68,6 +69,8 @@
 
       App.receiveMessageOnce(iframe, 'loaded', function(e) {
         embed.parentNode.removeChild(embed);
+        iframe.style.display = 'block';
+
         callback && callback(e);
       });
 
@@ -79,7 +82,6 @@
         }
 
         iframe.height = (e.detail + 'px');
-        iframe.style.display = 'block';
       });
 
 

r2/r2/public/static/js/utils.js

@@ -1,4 +1,9 @@
 r.utils = {
+
+    escapeSelector: function(str) {
+        return str.replace(/([ #;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1');
+    },
+
     clamp: function(val, min, max) {
         return Math.max(min, Math.min(max, val))
     },