From 1b1d036534454f7c6dddf5b344f4469ce2dae231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Mon, 28 Mar 2022 11:56:51 +0200
Subject: [PATCH] variant: make variant switch work on slow networks #228

---
 layouts/partials/stylesheet.html |  2 +-
 static/js/variant.js             | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index 336ae986fb..e4d93a2c61 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -7,7 +7,7 @@
     <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     {{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }}
     {{- with index $themevariants 0 }}
-    <link id="variant-style" href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
     {{- end }}
     <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
     <link href="{{"css/theme-relearn-light.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print">
diff --git a/static/js/variant.js b/static/js/variant.js
index 4225a9d5d3..fc3d4059df 100644
--- a/static/js/variant.js
+++ b/static/js/variant.js
@@ -4,6 +4,7 @@ var variants = {
 	variant: '',
 	variants: [],
 	customvariantname: 'my-custom-variant',
+	isstylesheetloaded: true,
 
 	init: function( variants ){
 		this.variants = variants;
@@ -25,6 +26,10 @@ var variants = {
 		window.localStorage.setItem( baseUriFull+'variant', variant );
 	},
 
+	isVariantLoaded: function(){
+		return window.theme && this.isstylesheetloaded;
+	},
+
 	markSelectedVariant: function(){
 		var variant = this.getVariant();
 		var select = document.querySelector( '#select-variant' );
@@ -35,8 +40,9 @@ var variants = {
 		if( variant && select.value != variant ){
 			select.value = variant;
 		}
-		setTimeout( function(){
-			if( window.theme ){
+		var interval_id = setInterval( function(){
+			if( this.isVariantLoaded() ){
+				clearInterval( interval_id );
 				initMermaid( true );
 				initSwagger( true );
 			}
@@ -127,7 +133,6 @@ var variants = {
 				this.saveCustomVariant();
 			}
 		}.bind( this ), 25 );
-
 	},
 
 	resetVariant: function(){
@@ -142,6 +147,10 @@ var variants = {
 		}
 	},
 
+	onLoadStylesheet: function(){
+		variants.isstylesheetloaded = true;
+	},
+
 	switchStylesheet: function( variant, without_check ){
 		var link = document.querySelector( '#variant-style' );
 		if( !link ){
@@ -149,7 +158,15 @@ var variants = {
 		}
 		var old_path = link.getAttribute( 'href' );
 		var new_path = this.generateVariantPath( variant, old_path );
-		link.setAttribute( 'href', new_path );
+		this.isstylesheetloaded = false;
+
+		// Chrome needs a new element to trigger the load callback again
+		var new_link = document.createElement( 'link' );
+		new_link.id = 'variant-style';
+		new_link.rel = 'stylesheet';
+		new_link.onload = this.onLoadStylesheet;
+		new_link.setAttribute( 'href', new_path );
+		link.parentNode.replaceChild( new_link, link );
 	},
 
 	changeVariant: function( variant ){