fix(ui): repack alert grid on font load

When fonts are loaded size of rendered elements might change, which can break the grid display, trigger a repack to fix that

ui/package.json

@@ -18,6 +18,7 @@
     "csshake": "1.5.3",
     "fast-deep-equal": "2.0.1",
     "favico.js": "0.3.10",
+    "fontfaceobserver": "2.1.0",
     "lato-font": "3.0.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",

ui/src/Components/Grid/AlertGrid/index.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
+import FontFaceObserver from "fontfaceobserver";
+
 import moment from "moment";
 
 import MasonryInfiniteScroller from "react-masonry-infinite";
@@ -141,6 +143,25 @@ const AlertGrid = observer(
       }
     };
 
+    componentDidMount() {
+      // We have font-display:swap set for font assets, this means that on initial
+      // render a fallback font might be used and later swapped for the final one
+      // (once the final font is loaded). This means that fallback font might
+      // render to a different size and the swap can result in component resize.
+      // For our grid this resize might leave gaps since everything uses fixed
+      // position, so we use font observer and trigger repack when fonts are loaded
+
+      const font400 = new FontFaceObserver("Lato", {
+        weight: 400
+      });
+      font400.load().then(this.masonryRepack);
+
+      const font700 = new FontFaceObserver("Lato", {
+        weight: 700
+      });
+      font700.load().then(this.masonryRepack);
+    }
+
     componentDidUpdate() {
       // whenever grid component re-renders we need to ensure that grid elements
       // are packed correctly

ui/yarn.lock

@@ -4713,6 +4713,11 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.2.6"
 
+fontfaceobserver@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
+  integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"