refactor: use display:none to reduce DOM mutations (twilio-labs#1724)

The JS currently adds and removes all rects/images each time the avatars
button is pressed. Instead, use the .hidden class to toggle which is
displayed.

assets/javascript/party-mode.js

@@ -5,10 +5,8 @@ const rects = Array.from(
 const images = Array.from(
   document.querySelectorAll('#pixel-canvas .pixel-image')
 );
-// hide image-pixels on load
-images.forEach(image => image.remove());
 
-let showImages = false;
+let imagesInitialized = false;
 
 // add additional 'x-start' and 'y-start' and original index attributes
 rects.forEach((rect, i) => {
@@ -200,22 +198,20 @@ function transform(transformFunction) {
 }
 
 function toggleImages() {
-  showImages = !showImages;
-  if (showImages) {
-    rects.forEach(rect => rect.remove());
+  // If switching to images for the first time, initialize.
+  if (!imagesInitialized) {
+    imagesInitialized = true;
     images.forEach(image => {
       const name = image.getAttribute('name');
-      image.classList.remove('hidden');
       image.setAttribute(
         'xlink:href',
         `//avatars.githubusercontent.com/${name}?size=20`
       );
-      canvas.appendChild(image);
     });
-  } else {
-    rects.forEach(rect => canvas.appendChild(rect));
-    images.forEach(image => image.remove());
   }
+  // Toggle display of rects and images.
+  rects.forEach(rect => rect.classList.toggle('hidden'));
+  images.forEach(image => image.classList.toggle('hidden'));
 }
 
 function allCells() {