Improve ux for when gdal hasn't finished loading

src/AppPage.tsx

@@ -44,6 +44,7 @@ import ImportWindow from './components/ImportWindow.tsx';
 import InfoFeatureBox from './components/InfoFeatureBox.tsx';
 import FunctionalitySelection from './components/Modals/FunctionalitySelection.tsx';
 import TableFunctionalitySelection from './components/Modals/TableFunctionalitySelection.tsx';
+import { setGdalLoaded } from './components/LeftMenu/gdalLoadingStatus';
 
 // Stores
 import { classificationPanelStore } from './store/ClassificationPanelStore';
@@ -398,6 +399,7 @@ const AppPage: () => JSX.Element = () => {
     loadGdal().then((gdal) => {
       // @ts-expect-error - we should fix the type of globalThis.gdal
       globalThis.gdal = gdal;
+      setGdalLoaded(true);
     });
 
     // Add event listener to the window to handle resize events

src/components/LeftMenu/ImportSection.tsx

@@ -10,6 +10,7 @@ import { setModalStore } from '../../store/ModalStore';
 
 // Subcomponents
 import ExampleDatasetModal from '../Modals/ExampleDatasetModal.tsx';
+import { gdalLoaded } from './gdalLoadingStatus';
 
 // Styles
 import '../../styles/LeftMenu.css';
@@ -25,8 +26,11 @@ export default function ImportSection(): JSX.Element {
           'border-bottom-left-radius': '0',
           'border-bottom-right-radius': '0',
           'border-bottom-width': '0',
+          cursor: gdalLoaded() ? 'pointer' : 'not-allowed',
         }}
         onClick={() => { setFileDropStore({ show: true }); }}
+        disabled={!gdalLoaded()}
+        title={gdalLoaded() ? '' : LL().ImportSection.GdalNotLoaded()}
       >
         { LL().ImportSection.OpenImportWindow() }
       </button>
@@ -50,7 +54,6 @@ export default function ImportSection(): JSX.Element {
             cancelButton: LL().DatasetCatalog.cancelButton(),
           });
         }}
-        disabled={false}
       >
         { LL().ImportSection.ExampleDatasets() }
       </button>

src/components/LeftMenu/gdalLoadingStatus.ts

@@ -0,0 +1,8 @@
+import { createSignal } from 'solid-js';
+
+const [
+  gdalLoaded,
+  setGdalLoaded,
+] = createSignal<boolean>(false);
+
+export { gdalLoaded, setGdalLoaded };

src/i18n/en/index.ts

@@ -367,6 +367,7 @@ const en = {
   ImportSection: {
     OpenImportWindow: 'Open data import window...',
     ExampleDatasets: 'Browse example datasets...',
+    GdalNotLoaded: 'The import module isn\'t loaded yet. Please wait a few seconds...',
   },
   MapConfiguration: {
     Dimensions: 'Dimensions',

src/i18n/fr/index.ts

@@ -367,6 +367,7 @@ const fr = {
   ImportSection: {
     OpenImportWindow: 'Ouvrir la fenêtre d\'import des données...',
     ExampleDatasets: 'Explorer les jeux de données d\'exemple...',
+    GdalNotLoaded: 'Le module d\'import n\'a pas fini de charger. Veuillez patienter quelques instants...',
   },
   MapConfiguration: {
     Dimensions: 'Dimensions',

src/i18n/i18n-types.ts

@@ -1205,6 +1205,10 @@ type RootTranslation = {
 		 * B​r​o​w​s​e​ ​e​x​a​m​p​l​e​ ​d​a​t​a​s​e​t​s​.​.​.
 		 */
 		ExampleDatasets: string
+		/**
+		 * T​h​e​ ​i​m​p​o​r​t​ ​m​o​d​u​l​e​ ​i​s​n​'​t​ ​l​o​a​d​e​d​ ​y​e​t​.​ ​P​l​e​a​s​e​ ​w​a​i​t​ ​a​ ​f​e​w​ ​s​e​c​o​n​d​s​.​.​.
+		 */
+		GdalNotLoaded: string
 	}
 	MapConfiguration: {
 		/**
@@ -5379,6 +5383,10 @@ export type TranslationFunctions = {
 		 * Browse example datasets...
 		 */
 		ExampleDatasets: () => LocalizedString
+		/**
+		 * The import module isn't loaded yet. Please wait a few seconds...
+		 */
+		GdalNotLoaded: () => LocalizedString
 	}
 	MapConfiguration: {
 		/**

src/styles/Main.css

@@ -112,6 +112,10 @@ button.unstyled {
   padding: unset;
 }
 
+.button.is-primary[disabled], fieldset[disabled] .button.is-primary {
+  background-color: unset !important;
+}
+
 /* Somehow large outline to make visible which button is focused */
 button.button:focus {
   /* -webkit-focus-ring-color auto thin; */