From 5d8ebdf79df160a744c19f797ac3891ae6a8381b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= <bjorn@mastermaps.com>
Date: Mon, 4 Dec 2023 17:28:23 +0100
Subject: [PATCH] fix: rendering timeout

---
 src/Map.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index d8cf4628..98061495 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -266,7 +266,12 @@ export class MapGL extends Evented {
 
     // Remove rendered class if rendering is happening
     onRender = () => {
-        this._addClass(renderedClass)
+        this._removeClass(renderedClass)
+
+        if (this._renderTimeout) {
+            clearTimeout(this._renderTimeout)
+            this._renderTimeout = null
+        }
     }
 
     // Add rendered class if map is idle
@@ -276,7 +281,11 @@ export class MapGL extends Evented {
             return
         }
 
-        this._removeClass(renderedClass)
+        // Make sure the map stay rendered for at least 500ms
+        this._renderTimeout = setTimeout(() => {
+            this._addClass(renderedClass)
+            this._renderTimeout = null
+        }, 500)
     }
 
     // Set hover state for features
@@ -479,8 +488,8 @@ export class MapGL extends Evented {
     _addClass(className) {
         const { classList } = this.getContainer()
 
-        if (classList.contains(className)) {
-            classList.remove(className)
+        if (!classList.contains(className)) {
+            classList.add(className)
         }
     }
 
@@ -488,8 +497,8 @@ export class MapGL extends Evented {
     _removeClass(className) {
         const { classList } = this.getContainer()
 
-        if (!classList.contains(className)) {
-            classList.add(className)
+        if (classList.contains(className)) {
+            classList.remove(className)
         }
     }
 }