perf: improvements. (#190)

morganney · Jan 22, 2024 · 99d6501 · 99d6501
1 parent aeb6444
commit 99d6501
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -2,33 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Busmap - Stop and vehicle locations of popular transit agencies.</title>
+    <title>
+      Busmap - Transit bus maps of vehicle locations and arrival or depature predictions.
+    </title>
     <meta
       name="description"
       content="Maps providing real-time arrival and departure times of vehicles for bus stops along routes in San Francisco Muni CIS, Toronto Transit Commission, OmniTrans and other transit agencies across North and South America." />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=2.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400&display=swap" />
+      rel="preload"
+      href="/font/Roboto-Regular.ttf"
+      as="font"
+      crossorigin="anonymous" />
     <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
-      integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"
-      integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer" />
+      rel="preload"
+      href="/font/Roboto-Italic.ttf"
+      as="font"
+      crossorigin="anonymous" />
+    <link rel="preload" href="/font/Roboto-Bold.ttf" as="font" crossorigin="anonymous" />
     <link rel="stylesheet" href="/src/global.css" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
-    <script src="https://accounts.google.com/gsi/client" defer></script>
   </head>
   <body>
     <main></main>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -42,7 +42,7 @@
     "express": "^4.18.2",
     "morgan": "^1.10.0",
     "vite": "^5.0.12",
-    "vite-bundle-visualizer": "^0.10.0"
+    "vite-bundle-visualizer": "^1.0.0"
   },
   "dependencies": {
     "@busmap/common": "^1.0.0-alpha.0",

diff --git a/packages/ui/public/font/Roboto-Bold.ttf b/packages/ui/public/font/Roboto-Bold.ttf
diff --git a/packages/ui/public/font/Roboto-Italic.ttf b/packages/ui/public/font/Roboto-Italic.ttf
diff --git a/packages/ui/public/font/Roboto-Regular.ttf b/packages/ui/public/font/Roboto-Regular.ttf
diff --git a/packages/ui/public/robots.txt b/packages/ui/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/packages/ui/src/components/signIn.tsx b/packages/ui/src/components/signIn.tsx
@@ -18,11 +18,23 @@ const SignIn: FC = () => {
   const { dispatch } = useGlobals()
   const [riderFavorites, setRiderFavorites] = useState<RiderFavoriteItem[]>()
   const [loading, setLoading] = useState(false)
+  const [gsiLoaded, setGsiLoaded] = useState(false)
   const storageDispatch = useStorageDispatch()
 
   useEffect(() => {
-    if (google && ref.current) {
-      google.accounts.id.initialize({
+    const script = document.createElement('script')
+
+    script.src = 'https://accounts.google.com/gsi/client'
+    script.async = true
+    script.addEventListener('load', () => {
+      setGsiLoaded(true)
+    })
+    document.head.appendChild(script)
+  }, [])
+
+  useEffect(() => {
+    if (gsiLoaded && window.google && ref.current) {
+      window.google.accounts.id.initialize({
         ux_mode: 'popup',
         client_id: import.meta.env.VITE_GOOG_CLIENT_ID,
         nonce: btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32)))),
@@ -53,14 +65,14 @@ const SignIn: FC = () => {
           }
         }
       })
-      google.accounts.id.renderButton(ref.current, {
+      window.google.accounts.id.renderButton(ref.current, {
         type: 'standard',
         click_listener: () => {
           // TODO: Record metrics.
         }
       })
     }
-  }, [dispatch, storageDispatch])
+  }, [gsiLoaded, dispatch, storageDispatch])
 
   useEffect(() => {
     if (riderFavorites?.length) {
@@ -73,7 +85,9 @@ const SignIn: FC = () => {
 
   return (
     <Page title="Sign In">
-      {loading ? (
+      {!gsiLoaded ? (
+        <Dots />
+      ) : loading ? (
         <p>
           Signing you in <Dots />
         </p>

diff --git a/packages/ui/src/global.css b/packages/ui/src/global.css
@@ -1,3 +1,24 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/font/Roboto-Italic.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/font/Roboto-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/font/Roboto-Bold.ttf) format('truetype');
+}
 @keyframes slide {
   from {
     transform: translateX(0);
@@ -58,7 +79,7 @@ body {
   color: var(--color-light);
   position: relative;
   margin: 0;
-  font-family: 'Roboto', Arial, sans-serif;
+  font-family: Roboto, Arial, sans-serif;
   font-weight: 400;
   font-style: normal;
 }
@@ -215,7 +236,7 @@ body.busmap-dark .busmap-vehicle::before {
 }
 .busmap-vehicle span {
   display: inline-block;
-  font-family: Roboto;
+  font-family: Roboto, Arial, sans-serif;
   padding: 2px 3px;
   height: 20px;
   max-width: 150px;

diff --git a/packages/ui/src/home.tsx b/packages/ui/src/home.tsx
@@ -128,7 +128,7 @@ const Home: FC = () => {
         const touchEndX = touches[0].pageX
 
         // Allow a small fudge factor
-        if (Math.abs(touchEndX - state.touchStartX) > 10) {
+        if (Math.abs(touchEndX - state.touchStartX) > 15) {
           // Close
           if (touchEndX < state.touchStartX) {
             globalDispatch({ type: 'collapsed', value: true })

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -3,6 +3,8 @@ import { RouterProvider } from 'react-router-dom'
 
 import { router } from './router.js'
 
+import 'leaflet/dist/leaflet.css'
+
 const rootEl = document.querySelector('main') as HTMLElement
 const root = createRoot(rootEl)