improved WebGL support message

Author: morandd

src/components/CheckWebGLSupport.astro

@@ -1,9 +1,11 @@
 
 <!-- A warning message box to inform the user that their browser does not support WebGL 2.0 -->
 <dialog class="warning-message-box">
-    Sorry, this website will not work on this device.
+    Unsupported device.
+    <br/><br/>
     This device is missing a required WebGL extension.
-    This is a known <a href="https://github.com/openlayers/openlayers/issues/15581">issue</a> with some Android devices.
+    This is a known <a href="https://github.com/openlayers/openlayers/issues/15581">issue</a> with some Android phones. 
+    Data maps will not render correctly.
 
     <br/><br/>
     Please visit from another device.<br/>
@@ -33,7 +35,11 @@ function WebGL_Has_OES_texture_float() {
 document.addEventListener('DOMContentLoaded', () => {
     if (!WebGL_Has_OES_texture_float()) {
         const el = document.querySelector('.warning-message-box') as HTMLDialogElement;
-        if (el) el.showModal();
+        if (!el) return;
+        // Set 5 second delay then show the modal
+        setTimeout(() => {
+            el.showModal();
+        }, 5000);
     }
 });
 </script>