fix flicker on preferences window load; moved all scss imports to the…

… root style.scss
snapcrunch · Jul 7, 2021 · 7f36095 · 7f36095
1 parent b4c5fd6
commit 7f36095
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 44 deletions.
diff --git a/index.js b/index.js
@@ -142,6 +142,8 @@ class ElectronPreferences extends EventEmitter2 {
 
     value(key, value) {
 
+    	// wtf is this doing exactly
+
         if (_.isArray(key)) {
             key.forEach(({ key, value }) => {
                 _.set(this.preferences, key, value);
@@ -185,7 +187,7 @@ class ElectronPreferences extends EventEmitter2 {
             acceptFirstMouse: true,
             maximizable: false,
             backgroundColor: '#E7E7E7',
-            show: true,
+            show: false,
             webPreferences: this.options.webPreferences
         };
 
@@ -196,10 +198,12 @@ class ElectronPreferences extends EventEmitter2 {
             preload: path.join(__dirname, './preload.js')
         }
 
+        // User provider `browserWindow`, we load those
         if (this.options.browserWindowOverrides) {
             browserWindowOpts = Object.assign(browserWindowOpts, this.options.browserWindowOverrides);
         }
 
+        //
         if (browserWindowOpts.webPreferences) {
             browserWindowOpts.webPreferences = Object.assign(defaultWebPreferences, browserWindowOpts.webPreferences)
         } else {
@@ -220,6 +224,13 @@ class ElectronPreferences extends EventEmitter2 {
             'slashes': true
         }));
 
+        // show: false by default, then show when ready to prevent page "flicker"
+		this.prefsWindow.once( 'ready-to-show', () => {
+
+			this.prefsWindow.show()
+
+		} )
+
         this.prefsWindow.on('closed', () => {
             this.prefsWindow = null;
         });

diff --git a/scss/style.scss b/scss/style.scss
@@ -1,62 +1,74 @@
 html {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    min-height: 100%;
-    overflow: auto;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	min-height: 100%;
+	overflow: auto;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    min-height: 100%;
-    overflow: hidden;
-    font-family: sans-serif, Verdana;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	min-height: 100%;
+	overflow: hidden;
+	font-family: sans-serif, Verdana;
 }
 
 .window {
-    height: 100%;
-    min-height: 100%;
-    display: flex;
-    justify-content: flex-start;
+	height: 100%;
+	min-height: 100%;
+	display: flex;
+	justify-content: flex-start;
 }
 
 * {
-    box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .noselect {
-    user-select: none;
+	user-select: none;
 }
 
 ::-webkit-scrollbar-track
 {
-    
+	
 }
 
 ::-webkit-scrollbar
 {
-    width: 12px;
+	width: 12px;
 }
 
 ::-webkit-scrollbar-thumb
 {
-    border-radius: 10px;
-    background-color: #afb9c0;
+	border-radius: 10px;
+	background-color: #afb9c0;
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
-        background: #252525;
-        color: #e4e4e4;
-    }
+	body {
+		background: #252525;
+		color: #e4e4e4;
+	}
 
-    ::-webkit-scrollbar-thumb
-    {
-        background-color: #151515;
-    }
+	::-webkit-scrollbar-thumb
+	{
+		background-color: #151515;
+	}
 }
 
+// Import all the styles
 @import "../src/app/components/main/style";
-@import "../src/app/components/sidebar/style";
+@import "../src/app/components/main/components/group/style";
+@import "../src/app/components/main/components/group/components/fields/accelerator/style";
+@import "../src/app/components/main/components/group/components/fields/checkbox/style";
+@import "../src/app/components/main/components/group/components/fields/color/style";
+@import "../src/app/components/main/components/group/components/fields/directory/style";
+@import "../src/app/components/main/components/group/components/fields/dropdown/style";
+@import "../src/app/components/main/components/group/components/fields/list/style";
+@import "../src/app/components/main/components/group/components/fields/message/style";
+@import "../src/app/components/main/components/group/components/fields/radio/style";
+@import "../src/app/components/main/components/group/components/fields/slider/style";
+@import "../src/app/components/main/components/group/components/fields/text/style";
+@import "../src/app/components/sidebar/style";
diff --git a/src/app/components/main/components/group/style.scss b/src/app/components/main/components/group/style.scss
@@ -68,14 +68,3 @@
         }
     }
 }
-
-@import "./components/fields/accelerator/style";
-@import "./components/fields/checkbox/style";
-@import "./components/fields/color/style";
-@import "./components/fields/directory/style";
-@import "./components/fields/dropdown/style";
-@import "./components/fields/list/style";
-@import "./components/fields/message/style";
-@import "./components/fields/radio/style";
-@import "./components/fields/slider/style";
-@import "./components/fields/text/style";
diff --git a/src/app/components/main/style.scss b/src/app/components/main/style.scss
@@ -10,5 +10,3 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
-
-@import "./components/group/style";