From b545100cadabf23770ec961cb9f679f3bb6ea2c0 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Tue, 2 Jan 2018 22:01:38 -0500
Subject: [PATCH] removed loader animation - it was causing issues with initial
 focus on the tree (probably by stealing focus)

---
 public/javascripts/init.js              | 21 ---------------------
 public/javascripts/note_editor.js       |  2 --
 public/javascripts/note_tree.js         |  3 ---
 public/javascripts/protected_session.js |  3 ---
 public/stylesheets/style.css            |  9 +--------
 views/index.ejs                         | 10 +++++++---
 6 files changed, 8 insertions(+), 40 deletions(-)

diff --git a/public/javascripts/init.js b/public/javascripts/init.js
index 482ee9c89..1f23b6062 100644
--- a/public/javascripts/init.js
+++ b/public/javascripts/init.js
@@ -155,27 +155,6 @@ $(document).tooltip({
     }
 });
 
-let appShown = false;
-
-function showAppIfHidden() {
-    if (!appShown) {
-        appShown = true;
-
-        $("#container").show();
-
-        // Get a reference to the loader's div
-        const loaderDiv = document.getElementById("loader-wrapper");
-        // When the transition ends remove loader's div from display
-        // so that we can access the map with gestures or clicks
-        loaderDiv.addEventListener("transitionend", function(){
-            loaderDiv.style.display = "none";
-        }, true);
-
-        // Kick off the CSS transition
-        loaderDiv.style.opacity = 0.0;
-    }
-}
-
 window.onerror = function (msg, url, lineNo, columnNo, error) {
     const string = msg.toLowerCase();
 
diff --git a/public/javascripts/note_editor.js b/public/javascripts/note_editor.js
index 1f9d14cef..0dd06f96d 100644
--- a/public/javascripts/note_editor.js
+++ b/public/javascripts/note_editor.js
@@ -130,8 +130,6 @@ const noteEditor = (function() {
 
         // after loading new note make sure editor is scrolled to the top
         noteDetailWrapperEl.scrollTop(0);
-
-        showAppIfHidden();
     }
 
     async function loadNote(noteId) {
diff --git a/public/javascripts/note_tree.js b/public/javascripts/note_tree.js
index c91629a23..6448a4398 100644
--- a/public/javascripts/note_tree.js
+++ b/public/javascripts/note_tree.js
@@ -573,9 +573,6 @@ const noteTree = (function() {
                     // so waiting a second helps
                     setTimeout(scrollToCurrentNote, 1000);
                 }
-                else {
-                    showAppIfHidden();
-                }
             },
             hotkeys: {
                 keydown: keybindings
diff --git a/public/javascripts/protected_session.js b/public/javascripts/protected_session.js
index ae4e469bd..521b6bd04 100644
--- a/public/javascripts/protected_session.js
+++ b/public/javascripts/protected_session.js
@@ -22,9 +22,6 @@ const protected_session = (function() {
         const dfd = $.Deferred();
 
         if (requireProtectedSession && !isProtectedSessionAvailable()) {
-            // if this is entry point then we need to show the app even before the note is loaded
-            showAppIfHidden();
-
             protectedSessionDeferred = dfd;
 
             dialogEl.dialog({
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 5b924fa8c..a001a7bc7 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -199,11 +199,4 @@ div.ui-tooltip {
 
 .suppressed {
     filter: opacity(7%);
-}
-
-#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}
-#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#777;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
-#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#aaa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
-#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#ddd;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
-@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
-@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 73eadae9a..9dbd8c34e 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -5,9 +5,7 @@
     <title>Trilium Notes</title>
   </head>
   <body>
-    <div id="loader-wrapper"><div id="loader"></div></div>
-
-    <div id="container" style="display: none;">
+    <div id="container" style="display:none;">
       <div id="header" class="hide-toggle">
         <div id="header-title">
           <img src="images/app-icons/png/24x24.png">
@@ -399,5 +397,11 @@
     <script src="javascripts/link.js"></script>
     <script src="javascripts/sync.js"></script>
     <script src="javascripts/messaging.js"></script>
+
+    <script type="text/javascript">
+      // we hide container initally because otherwise it is rendered first without CSS and then flickers into
+      // final form which is pretty ugly.
+      $("#container").show();
+    </script>
   </body>
 </html>
\ No newline at end of file