fix(geomappanel.tsx): load all fonts before rendering the map to render icons on initial load

#98

Author: felix-mu

.config/webpack/webpack.config.ts

@@ -98,10 +98,16 @@ const config = async (env): Promise<Configuration> => ({
       // {
       //   test: /fontmaki.*\.css/,
       //   use: [
-      //     { loader: "style-loader", options: { injectType: "linkTag", attributes: { re: "preload" } } },
-      //     "css-loader"
+      //     { loader: "style-loader", options: { injectType: "linkTag", attributes: { rel: "preload", as: "style", onload: "this.rel = 'stylesheet'" } } },
+      //     // "css-loader"
       //   ],
       //   type: 'asset/resource',
+      //   generator: {
+      //     // Keep publicPath relative for host.com/grafana/ deployments
+      //     publicPath: `public/plugins/${pluginJson.id}/static/css/`,
+      //     outputPath: 'static/css/',
+      //     filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+      //   },
       // },
       {
         test: /\.css$/,

src/GeomapPanel.tsx

@@ -15,6 +15,10 @@ import { isArray, isEqual } from 'lodash';
 import './GeomapPanel.css';
 import "bootstrap-icons/font/bootstrap-icons.css";
 
+// Load directly when plugin
+import 'static/css/fontmaki2.css';
+import 'static/css/fontmaki.css';
+
 // import 'ol-layerswitcher/dist/ol-layerswitcher.css';
 
 // import WKT from 'ol/format/WKT.js';
@@ -386,6 +390,14 @@ export class GeomapPanel extends Component<Props, State> {
       this.map.dispose();
     }
 
+    // Load fontmaki fonts which are used for icons
+    for (const fontFace of document.fonts) {
+      // if (fontFace.family.toLowerCase().includes("fontmaki") || 
+      //         fontFace.family.toLowerCase().includes("grafana")) {
+        await fontFace.load()
+      // }
+    }
+    // await document.fonts.ready
 
     const { options } = this.props;
     this.map = new Map({
@@ -513,7 +525,7 @@ export class GeomapPanel extends Component<Props, State> {
     }
   };
 
-  async initBasemap(cfg: ExtendMapLayerOptions) {
+  async initBasemap(cfg: ExtendMapLayerOptions) {    
     if (!this.map) {
       return;
     }