From 7fd972b80f764586094026c4c459df82bfeb7f62 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sun, 20 Dec 2020 16:01:15 +0000
Subject: [PATCH] Fix weather icon flickering

---
 src/index.d.ts                      |  8 +++++
 src/leaflet/control/ClockControl.ts | 52 ++++++++++++++++-------------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 77fa6c8..c2613b2 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,4 +1,12 @@
 declare module '*.svg' {
   const content: any;
   export default content;
+}
+
+interface BrowserSpriteSymbol {
+  id: string;
+  viewBox: string;
+  content: string;
+  node: SVGSymbolElement;
+  url: string;
 }
\ No newline at end of file
diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts
index 94712af..5ce0603 100644
--- a/src/leaflet/control/ClockControl.ts
+++ b/src/leaflet/control/ClockControl.ts
@@ -42,6 +42,8 @@ export class ClockControl extends Control {
 	private _sun?: HTMLElement;
 	private _moon?: HTMLElement;
 	private _clock?: HTMLElement;
+	private _currentMoonIcon?: BrowserSpriteSymbol;
+	private _currentSunIcon?: BrowserSpriteSymbol;
 
 	constructor(options: ClockControlOptions) {
 		super(Object.assign(options, {position: 'topcenter'}));
@@ -122,33 +124,35 @@ export class ClockControl extends Control {
 
 		if (this.options.showWeather) {
 			if (worldState.thundering) {
-				this._sun!.innerHTML = `
-					<svg class="svg-icon" viewBox="${sunStorm.viewBox}">
-						<use xlink:href="${sunStorm.url}" />
-					</svg>`;
-				this._moon!.innerHTML = `
-					<svg class="svg-icon" viewBox="${moonStorm.viewBox}">
-						<use xlink:href="${moonStorm.url}" />
-					</svg>`;
+				this._setSunIcon(sunStorm);
+				this._setMoonIcon(moonStorm);
 			} else if (worldState.raining) {
-				this._sun!.innerHTML = `
-					<svg class="svg-icon" viewBox="${sunRain.viewBox}">
-						<use xlink:href="${sunRain.url}" />
-					</svg>`;
-				this._moon!.innerHTML = `
-					<svg class="svg-icon" viewBox="${moonRain.viewBox}">
-						<use xlink:href="${moonRain.url}" />
-					</svg>`;
+				this._setSunIcon(sunRain);
+				this._setMoonIcon(moonRain);
 			} else {
-				this._sun!.innerHTML = `
-					<svg class="svg-icon" viewBox="${sun.viewBox}">
-						<use xlink:href="${sun.url}" />
-					</svg>`;
-				this._moon!.innerHTML = `
-					<svg class="svg-icon" viewBox="${moon.viewBox}">
-						<use xlink:href="${moon.url}" />
-					</svg>`;
+				this._setSunIcon(sun);
+				this._setMoonIcon(moon);
 			}
 		}
 	}
+
+	_setSunIcon(icon: BrowserSpriteSymbol) {
+		if(this._sun && this._currentSunIcon !== icon) {
+			this._sun!.innerHTML = `
+				<svg class="svg-icon" viewBox="${icon.viewBox}">
+					<use xlink:href="${icon.url}" />
+				</svg>`;
+			this._currentSunIcon = icon;
+		}
+	}
+
+	_setMoonIcon(icon: BrowserSpriteSymbol) {
+		if(this._moon && this._currentMoonIcon !== icon) {
+			this._moon!.innerHTML = `
+				<svg class="svg-icon" viewBox="${icon.viewBox}">
+					<use xlink:href="${icon.url}" />
+				</svg>`;
+			this._currentMoonIcon = icon;
+		}
+	}
 }
\ No newline at end of file