From 2e7c092e1efc12c9f7856cc80aad24424f57b2d1 Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Tue, 9 Nov 2021 13:37:53 -0600
Subject: [PATCH] Hide footer on fleetdm.com until the page is loaded (#2848)

* added a jquery function to show footer once the page is rendered

* Update layout.ejs

* fix lint error
---
 website/views/layouts/layout.ejs | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index b585d7d505..3b32c48bce 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -123,7 +123,8 @@
 
       <%- body %>
 
-      <div style="background-color: #182147;" purpose="page-footer">
+      <%/* Note: footer is hidden until the page is loaded. See «script» tag at the bottom of this file. */%>
+      <div style="background-color: #182147;" class="invisible" purpose="page-footer" data-hide-until-rendered>
         <div style="max-width: 1248px;" purpose="footer-container" class="container-fluid d-flex flex-column flex-sm-row align-items-sm-end justify-content-center justify-content-sm-between">
           <div class="d-flex flex-column order-first justify-content-start">
             <div class="d-flex pb-4 pr-4">
@@ -332,5 +333,12 @@
     })();
     </script>
 
+    <% /* Keep footer hidden until the document is ready (prevents flicker that is especially unattractive on mobile) */ %>
+    <script>
+    $(function() {
+      $('[data-hide-until-rendered]').removeClass('invisible'); // Note: invisible is a bootstrap 4 class
+    });
+    </script>
+
   </body>
 </html>