index.ts: Better Gmail loading initialisation logic

Instead of using a timeout, which may get executed prematurely, check
for the visibility of Gmail's `loading` screen. When it disappears from
view, we know we can safely initialise all our plugin features.

This allows us to, for example, try to ensure our `<style>` element gets
appended last. Now the sidebar actually gets hidden with our CSS rule
from 496ac03b0d6afb28db09998eb9944db2102ad49e since it can take
precedence over Gmail's asynchronously-loaded styles.

2 files changed, 17 insertions, 7 deletions

diff --git a/src/index.ts b/src/index.ts
index 8ab0071..dbb3b8a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,9 +5,17 @@
 // @match https://mail.google.com/*
 // ==/UserScript==
 
-import './style';
+import style from './style';
 import sidebar from './sidebar';
 
-window.setTimeout(function() {
-	sidebar();
-}, 3000);
+var loading_view = document.getElementById('loading');
+
+// Wait until loading view disappears before initialising
+var initialize = window.setInterval(function() {
+	if (loading_view.offsetParent === null) {
+		window.clearInterval(initialize);
+
+		style();
+		sidebar();
+	}
+}, 500);
diff --git a/src/style.ts b/src/style.ts
index e560f93..26d8f24 100644
--- a/src/style.ts
+++ b/src/style.ts
@@ -26,6 +26,8 @@ function append_css(css: string): void {
 	document.head.appendChild(s);
 }
 
-append_css(
-	construct_css(css)
-);
+export default function(): void {
+	append_css(
+		construct_css(css)
+	);
+};