From 784f577c4dcee7cc6a72b194c8eeed55c57c0b58 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 15 Jan 2018 11:35:45 +0000
Subject: [PATCH] Improve redraw performance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s noticeable when clicking from row to row in the spreadsheet that
the page jumps around a fair bit on load because there are a couple of
Javascript-powered components.

This commit makes sure:
- the radio select component doesn’t change height when rendering for
  the first time
- the scrollable table doesn’t show parts of the table that should be
  hidden by overflow for a fraction of second before all the JS has
  run
- the right-hand shadow on horizontally scrollable tables doesn’t fade
  in on initial page load but shows at 100% opacity immediately
---
 app/assets/javascripts/fullscreenTable.js              |  8 +++++++-
 .../stylesheets/components/fullscreen-table.scss       | 10 +++++++---
 app/assets/stylesheets/components/radio-select.scss    |  2 ++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js
index 27ff52636..f4ef998b6 100644
--- a/app/assets/javascripts/fullscreenTable.js
+++ b/app/assets/javascripts/fullscreenTable.js
@@ -52,7 +52,8 @@
             'height': this.nativeHeight,
             'top': this.topOffset
           })
-        );
+        )
+        .css('position', 'absolute');
 
       this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table');
       this.$fixedTable = this.$component.find('.fullscreen-fixed-table');
@@ -100,6 +101,11 @@
           this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width())
         );
 
+      setTimeout(
+        () => this.$component.find('.fullscreen-right-shadow').addClass('with-transition'),
+        3000
+      );
+
     };
 
   };
diff --git a/app/assets/stylesheets/components/fullscreen-table.scss b/app/assets/stylesheets/components/fullscreen-table.scss
index b552fcbd8..d5c8f78fc 100644
--- a/app/assets/stylesheets/components/fullscreen-table.scss
+++ b/app/assets/stylesheets/components/fullscreen-table.scss
@@ -6,8 +6,7 @@
     z-index: 10;
     overflow-y: hidden;
     box-sizing: border-box;
-    position: absolute;
-    margin: 5px 0 $gutter 0;
+    margin: 0 0 $gutter 0;
     padding: 0 0 0 0;
     overflow: hidden;
     border-bottom: 1px solid $border-colour;
@@ -42,8 +41,13 @@
     z-index: 200;
 
     &.visible {
-      transition: box-shadow 0.3s ease-in-out;
+
+      &.with-transition {
+        transition: box-shadow 0.6s ease-out;
+      }
+
       box-shadow: inset -1px 0 0 0 $border-colour, inset -3px 0 0 0 rgba($border-colour, 0.2);
+
     }
 
   }
diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss
index 19f835310..59586121a 100644
--- a/app/assets/stylesheets/components/radio-select.scss
+++ b/app/assets/stylesheets/components/radio-select.scss
@@ -1,5 +1,7 @@
 .radio-select {
 
+  min-height: 39px;
+
   &-column {
 
     display: inline-block;