Added ImagesLoaded reflowing for the grid

package-lock.json

@@ -2262,6 +2262,14 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
       "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
     },
+    "@types/imagesloaded": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@types/imagesloaded/-/imagesloaded-4.1.2.tgz",
+      "integrity": "sha512-QxpoYhaYgv1qXwwPd6EnQFLkzrRZaecIafPsY51fnrsr+qIh0wrPVaOQirBaFl+FjFHk5BMfpf+6QHy0lRrcNw==",
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -7965,6 +7973,14 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "imagesloaded": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
+      "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
+      "requires": {
+        "ev-emitter": "^1.0.0"
+      }
+    },
     "immer": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
+    "@types/imagesloaded": "^4.1.2",
     "@types/jest": "^26.0.19",
     "@types/masonry-layout": "^4.2.2",
     "@types/node": "^12.19.11",
@@ -14,6 +15,9 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.9.4",
+    "axios": "^0.21.1",
+    "gh-pages": "^3.1.0",
+    "imagesloaded": "^4.1.4",
     "include-media": "^1.4.9",
     "masonry-layout": "^4.2.2",
     "node-sass": "^4.14.1",
@@ -23,9 +27,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "typescript": "^4.1.3",
-    "web-vitals": "^0.2.4",
-    "axios": "^0.21.1",
-    "gh-pages": "^3.1.0"
+    "web-vitals": "^0.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/ProjectGrid.tsx

@@ -10,6 +10,8 @@
 
 import "./ProjectGrid.scss";
 import Masonry from "masonry-layout";
+import ImagesLoaded from "imagesloaded";
+
 import { useEffect } from "react";
 import {LinkOutlined} from "@ant-design/icons";
 import CodeDaySD from "../images/SanDiego.svg";
@@ -154,13 +156,18 @@ export const ProjectGrid = () => {
   useEffect(() => {
     var elem = document.querySelector("#project-grid");
 
-    // @ts-ignore
-    var msnry = new Masonry(elem, {
-      itemSelector: ".GridElement",
-      gutter: 0,
-      columnWidth: ".GridSizer",
-      percentPosition: true,
-    });
+    if (elem) {
+      const msnry = new Masonry(elem, {
+        itemSelector: ".GridElement",
+        gutter: 0,
+        columnWidth: ".GridSizer",
+        percentPosition: true,
+      });
+
+      ImagesLoaded(elem).on("progress", () => {
+        msnry.layout?.();
+      })
+    }
   });
 
   return (