From 103e09e3a0af45709191a796f3f5aa9f3c59dc0a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 11 Oct 2016 18:11:20 +0100
Subject: [PATCH] Make the UI more performant by not reflowing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the height of the component until it’s loaded so that it doesn’t
causes the page to reflow while it’s rendering the buttons.

Stops the options being shown and then immediately hiding on initial
page load.
---
 app/assets/javascripts/radioSelect.js               | 12 +++++++-----
 app/assets/stylesheets/components/radio-select.scss | 11 +++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/radioSelect.js b/app/assets/javascripts/radioSelect.js
index 024a71b66..8d359cc7d 100644
--- a/app/assets/javascripts/radioSelect.js
+++ b/app/assets/javascripts/radioSelect.js
@@ -5,7 +5,7 @@
   let states = {
     'initial': Hogan.compile(`
       <div class="radio-select-column">
-        <label class="block-label" for="{{name}}-0">
+        <label class="block-label js-block-label" for="{{name}}-0">
           <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value=""> Now
         </label>
       </div>
@@ -17,13 +17,13 @@
     `),
     'choose': Hogan.compile(`
       <div class="radio-select-column">
-        <label class="block-label" for="{{name}}-0">
+        <label class="block-label js-block-label" for="{{name}}-0">
           <input checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
         </label>
       </div>
       <div class="radio-select-column">
         {{#choices}}
-          <label class="block-label" for="{{id}}">
+          <label class="block-label js-block-label" for="{{id}}">
             <input type="radio" value="{{value}}" id="{{id}}" name="{{name}}" class="js-option" />
             {{label}}
           </label>
@@ -32,13 +32,13 @@
     `),
     'chosen': Hogan.compile(`
       <div class="radio-select-column">
-        <label class="block-label" for="{{name}}-0">
+        <label class="block-label js-block-label" for="{{name}}-0">
           <input id="{{name}}-0" name="{{name}}" type="radio" value="" class="js-initial-option"> Now
         </label>
       </div>
       <div class="radio-select-column">
         {{#choices}}
-          <label class="block-label" for="{{id}}">
+          <label class="block-label js-block-label" for="{{id}}">
             <input checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
             {{label}}
           </label>
@@ -139,6 +139,8 @@
         'name': name
       });
 
+      $component.css({'height': 'auto'});
+
     };
 
   };
diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss
index c33a985c9..1440d0ad6 100644
--- a/app/assets/stylesheets/components/radio-select.scss
+++ b/app/assets/stylesheets/components/radio-select.scss
@@ -23,6 +23,17 @@
 
   .js-enabled & {
 
+    height: 60px;
+    overflow: visible;
+
+    .block-label {
+      display: none;
+    }
+
+    .js-block-label {
+      display: inline-block;
+    }
+
   }
 
 }