[test] Add font loader for pigment visual regression tests (#43789)

Author: Janpot

.gitignore

@@ -42,3 +42,4 @@ docs/public/static/blog/feed/*
 .github/styles/
 .nx/cache
 .nx/workspace-data
+screenshots

apps/pigment-css-vite-app/package.json

@@ -9,32 +9,34 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@mui/material-pigment-css": "workspace:^",
-    "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
     "@mui/lab": "workspace:^",
     "@mui/material": "workspace:^",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/system": "workspace:^",
+    "@mui/utils": "workspace:^",
     "clsx": "^2.1.1",
     "playwright": "^1.47.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@pigment-css/vite-plugin": "0.0.22",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8.4.47",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.4.5",
-    "vite-plugin-pages": "^0.32.3",
-    "vite-plugin-node-polyfills": "0.22.0"
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-plugin-pages": "^0.32.3"
   },
   "nx": {
     "targets": {

apps/pigment-css-vite-app/src/pages/fixtures/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useLocation, matchRoutes, Link } from 'react-router-dom';
+import webfontloader from 'webfontloader';
 import routes from '~react-pages';
 import IndexLayout from '../../Layout';
 
@@ -24,9 +25,31 @@ export default function Layout() {
     (item) => !!item.path && !item.path.includes('react-pagination'),
   );
 
+  const [fontState, setFontState] = React.useState('pending');
+  React.useEffect(() => {
+    webfontloader.load({
+      google: {
+        families: ['Roboto:300,400,500,700', 'Inter:300,400,500,600,700,800,900', 'Material+Icons'],
+      },
+      custom: {
+        families: ['Font Awesome 5 Free:n9'],
+        urls: ['https://use.fontawesome.com/releases/v5.14.0/css/all.css'],
+      },
+      timeout: 20000,
+      active: () => {
+        setFontState('active');
+      },
+      inactive: () => {
+        setFontState('inactive');
+      },
+    });
+  }, []);
+
+  const fixturePrepared = fontState === 'active';
+
   return (
     <IndexLayout>
-      {demo && (
+      {demo && fixturePrepared && (
         <div id="root-demo">
           {fixturesRoutes.find((item) => item.path === demo)?.element}
           {demosRoutes.find((item) => item.path === demo)?.element}

apps/pigment-css-vite-app/src/pages/index.tsx

@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div>
       <p>
-        See Material UI components in <Link to="/material-ui">action</Link>!
+        See Material UI components in <Link to="/fixtures">action</Link>!
       </p>
     </div>
   );