From 34118479b04d7dcad7be8c2ae78dfb5216e734c7 Mon Sep 17 00:00:00 2001
From: Blake Gentry <bgentry@users.noreply.github.com>
Date: Mon, 10 Jun 2024 20:56:19 -0500
Subject: [PATCH] Fix perf regression, upgrade tanstack deps (#18)

* upgrade tanstack deps, regen route tree

* refresh icon animation fixes for CPU usage
---
 ui/package-lock.json                | 172 +++++++++++++---------------
 ui/package.json                     |  12 +-
 ui/src/components/RefreshPauser.tsx |  12 +-
 ui/src/routeTree.gen.ts             |  91 ++++++++++++++-
 ui/tailwind.config.ts               |   6 +-
 5 files changed, 181 insertions(+), 112 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index cf69121..24b856d 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,8 +13,8 @@
         "@headlessui/tailwindcss": "^0.2.0",
         "@heroicons/react": "^2.0.18",
         "@tailwindcss/typography": "^0.5.10",
-        "@tanstack/react-query": "^5.8.7",
-        "@tanstack/react-router": "^1.16.6",
+        "@tanstack/react-query": "^5.40.1",
+        "@tanstack/react-router": "^1.35.6",
         "clsx": "^2.0.0",
         "date-fns": "^3.1.0",
         "next-themes": "^0.3.0",
@@ -37,10 +37,10 @@
         "@storybook/react-vite": "^8.0.10",
         "@storybook/test": "^8.0.10",
         "@tailwindcss/forms": "^0.5.7",
-        "@tanstack/eslint-plugin-query": "^5.8.4",
-        "@tanstack/react-query-devtools": "^5.8.8",
-        "@tanstack/router-devtools": "^1.16.6",
-        "@tanstack/router-vite-plugin": "^1.16.5",
+        "@tanstack/eslint-plugin-query": "^5.43.1",
+        "@tanstack/react-query-devtools": "^5.40.1",
+        "@tanstack/router-devtools": "^1.35.6",
+        "@tanstack/router-vite-plugin": "^1.35.4",
         "@testing-library/react": "^15.0.7",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
@@ -4946,19 +4946,19 @@
       }
     },
     "node_modules/@tanstack/eslint-plugin-query": {
-      "version": "5.32.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.32.1.tgz",
-      "integrity": "sha512-hlvKBV0JncpoA2HThfiD6OH8pdtn2N7WR74nWmDEuBEV1HMwXDo1QF/h/oKRPheEjzokVI13D3p11Lfw2kQr+g==",
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.43.1.tgz",
+      "integrity": "sha512-5WZmkny6u/lSjzUpgnvn+vnA1KtIa7umNZYLqCg9TZK0lmz9SRP6Hnui1PI279eisDy/O+1yD0MfEHTJWlQGVw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/utils": "^6.20.0"
+        "@typescript-eslint/utils": "8.0.0-alpha.28"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "eslint": "^8.0.0"
+        "eslint": "^8 || ^9"
       }
     },
     "node_modules/@tanstack/history": {
@@ -4974,18 +4974,18 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.35.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.35.1.tgz",
-      "integrity": "sha512-0Dnpybqb8+ps6WgqBnqFEC+1F/xLvUosRAq+wiGisTgolOZzqZfkE2995dEXmhuzINiTM7/a6xSGznU0NIvBkw==",
+      "version": "5.40.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.40.0.tgz",
+      "integrity": "sha512-eD8K8jsOIq0Z5u/QbvOmfvKKE/XC39jA7yv4hgpl/1SRiU+J8QCIwgM/mEHuunQsL87dcvnHqSVLmf9pD4CiaA==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.32.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.32.1.tgz",
-      "integrity": "sha512-7Xq57Ctopiy/4atpb0uNY5VRuCqRS/1fi/WBCKKX6jHMa6cCgDuV/AQuiwRXcKARbq2OkVAOrW2v4xK9nTbcCA==",
+      "version": "5.37.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz",
+      "integrity": "sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==",
       "dev": true,
       "funding": {
         "type": "github",
@@ -4993,11 +4993,11 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.35.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.35.1.tgz",
-      "integrity": "sha512-i2T7m2ffQdNqlX3pO+uMsnQ0H4a59Ens2GxtlMsRiOvdSB4SfYmHb27MnvFV8rGmtWRaa4gPli0/rpDoSS5LbQ==",
+      "version": "5.40.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.40.1.tgz",
+      "integrity": "sha512-gOcmu+gpFd2taHrrgMM9RemLYYEDYfsCqszxCC0xtx+csDa4R8t7Hr7SfWXQP13S2sF+mOxySo/+FNXJFYBqcA==",
       "dependencies": {
-        "@tanstack/query-core": "5.35.1"
+        "@tanstack/query-core": "5.40.0"
       },
       "funding": {
         "type": "github",
@@ -5008,26 +5008,26 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.35.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.35.1.tgz",
-      "integrity": "sha512-G2TP8ekCo+C9IPdEswKB9mqG5pxV+DWq86lmNw/VbUpdyNwNFvKi7GdcqW1pLDi5al+zifSjGSO7QZ7zDMJcQg==",
+      "version": "5.40.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.40.1.tgz",
+      "integrity": "sha512-/AN2UsbuL+28/KSlBkVHq/4chHTEp4l2UWTKWixXbn4pprLQrZGmQTAKN4tYxZDuNwNZY5+Zp67pDfXj+F/UBA==",
       "dev": true,
       "dependencies": {
-        "@tanstack/query-devtools": "5.32.1"
+        "@tanstack/query-devtools": "5.37.1"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.35.1",
-        "react": "^18.0.0"
+        "@tanstack/react-query": "^5.40.1",
+        "react": "^18 || ^19"
       }
     },
     "node_modules/@tanstack/react-router": {
-      "version": "1.31.22",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.31.22.tgz",
-      "integrity": "sha512-TlHXiidpwE4bwpx7aNCq9Y4wfyWj/gQyZFZ1SFuKRbnAEEP3aSopwzqVX2DkNk/ZVwuvW0QMZk+bcHYurJpHUg==",
+      "version": "1.35.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.35.6.tgz",
+      "integrity": "sha512-CkM2uZBq+vRISfSxtVxc2Fn6lCXrfvQuptu8GN73lznYZvqIMzYMK6tCIl25jS8Fa3LOeltdNoqpHGq+nFHV8w==",
       "dependencies": {
         "@tanstack/history": "1.31.16",
         "@tanstack/react-store": "^0.2.1",
@@ -5080,12 +5080,11 @@
       }
     },
     "node_modules/@tanstack/router-devtools": {
-      "version": "1.31.22",
-      "resolved": "https://registry.npmjs.org/@tanstack/router-devtools/-/router-devtools-1.31.22.tgz",
-      "integrity": "sha512-JHVIApgWNo0r+S/NAm8ZYErVvHGYmpUPHeZkETqlrdzsQvVS79DmzTgtTrPMxAYgHcGLEPi1p7RBZAlVBoa4vA==",
+      "version": "1.35.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-devtools/-/router-devtools-1.35.6.tgz",
+      "integrity": "sha512-ilWypB+l/aVuwRkbc6WpBHsgW7FGNRnYkGd05iI4Il6CGO0HPCpXvW91rJNQeVgcgRvIiLRdiGOA6Qho3OJe/Q==",
       "dev": true,
       "dependencies": {
-        "@tanstack/react-router": "1.31.22",
         "clsx": "^2.1.0",
         "date-fns": "^2.29.1",
         "goober": "^2.1.14"
@@ -5098,6 +5097,7 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
+        "@tanstack/react-router": "^1.35.6",
         "react": ">=16.8",
         "react-dom": ">=16.8"
       }
@@ -5119,9 +5119,9 @@
       }
     },
     "node_modules/@tanstack/router-generator": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.30.0.tgz",
-      "integrity": "sha512-EOMm7wQRZURqnjL7pueIkMgCsTw/+4N1jtJUHTwaPRQcUsLHuAyy0GEMP6GMRcYqGrh7mb2HYFsVEcNd/1mn4g==",
+      "version": "1.35.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.35.4.tgz",
+      "integrity": "sha512-muV4qNnh7RjGakPV+ERaJwY6Jz1ERDWuGBV9iIkw3UV+Dx0wnxyXAnNDSTX9E38WJmNL48uesXJ0jpV/8Irx9Q==",
       "dev": true,
       "dependencies": {
         "prettier": "^3.1.1",
@@ -5136,9 +5136,9 @@
       }
     },
     "node_modules/@tanstack/router-vite-plugin": {
-      "version": "1.31.18",
-      "resolved": "https://registry.npmjs.org/@tanstack/router-vite-plugin/-/router-vite-plugin-1.31.18.tgz",
-      "integrity": "sha512-rNbV4JckO1UPWikypsYlJqQWABTMEjANKMzQMGX9rmPomubXJqno6cgZXgjTG5bu2fXKALlCQrkNql+olQIzMg==",
+      "version": "1.35.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-vite-plugin/-/router-vite-plugin-1.35.4.tgz",
+      "integrity": "sha512-uGr6m9giWMU9nDZ7krR9hjWpaOi/M4/RBTgI6UrgBoPvSmXc66R319vb4iY57jyN8gZlxsajvxLEf/hVJy+NsQ==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.7",
@@ -5150,7 +5150,7 @@
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
         "@babel/types": "^7.24.0",
-        "@tanstack/router-generator": "1.30.0",
+        "@tanstack/router-generator": "1.35.4",
         "@types/babel__core": "^7.20.5",
         "@types/babel__generator": "^7.6.8",
         "@types/babel__template": "^7.4.4",
@@ -6233,41 +6233,38 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
-      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-PnIz94+nbyjJisMI+KZqXMfw0wfIHvbyh0MGEx2M314wqm6SUWcxB5I8zduGQgJbRB0YFnboPS+MeSlBYPWrBQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.21.0",
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/typescript-estree": "6.21.0",
-        "semver": "^7.5.4"
+        "@typescript-eslint/scope-manager": "8.0.0-alpha.28",
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/typescript-estree": "8.0.0-alpha.28"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "eslint": "^8.57.0 || ^9.0.0"
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
-      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-Iq8QFmJ2DH2tx7jfOraMZM1Y1axRfWh4t29JXRgbzvgiDQ2uHRHcaXqTulqsZXzJ0+vERNvNkOIPcQYGsNeGVQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0"
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.28"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -6275,12 +6272,12 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
-      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-HYg+e0EWVShx0FEX0MAjDinYLmd+wD6nGMpbaddB1iACYwqaJFbf7vw0l+hdLTJvQC6UY8ndRkaEsL68QEoIZQ==",
       "dev": true,
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -6288,22 +6285,22 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
-      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-I/5ODd4XJ+TO0XrKwDaB4tVGVi6kz2LAlN3WPd7mZVVtW21HHByCILRhOF9RbC69gJQ/TGHFpWCmAcsq2RZisg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.28",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -6316,41 +6313,26 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-+ewAOeKDycydKMlnfmW8zAURTA8PR5Csyvxy6PJt4XRYjoquode9/eWaMt9Sp4Rz1FGMSVU9KxDRR83ASH/xkQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "eslint-visitor-keys": "^3.4.1"
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.6.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.1.tgz",
-      "integrity": "sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
diff --git a/ui/package.json b/ui/package.json
index d934a2b..568752c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,8 +9,8 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.0.18",
     "@tailwindcss/typography": "^0.5.10",
-    "@tanstack/react-query": "^5.8.7",
-    "@tanstack/react-router": "^1.16.6",
+    "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-router": "^1.35.6",
     "clsx": "^2.0.0",
     "date-fns": "^3.1.0",
     "next-themes": "^0.3.0",
@@ -33,10 +33,10 @@
     "@storybook/react-vite": "^8.0.10",
     "@storybook/test": "^8.0.10",
     "@tailwindcss/forms": "^0.5.7",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
-    "@tanstack/react-query-devtools": "^5.8.8",
-    "@tanstack/router-devtools": "^1.16.6",
-    "@tanstack/router-vite-plugin": "^1.16.5",
+    "@tanstack/eslint-plugin-query": "^5.43.1",
+    "@tanstack/react-query-devtools": "^5.40.1",
+    "@tanstack/router-devtools": "^1.35.6",
+    "@tanstack/router-vite-plugin": "^1.35.4",
     "@testing-library/react": "^15.0.7",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
diff --git a/ui/src/components/RefreshPauser.tsx b/ui/src/components/RefreshPauser.tsx
index d570cdb..efa0b8b 100644
--- a/ui/src/components/RefreshPauser.tsx
+++ b/ui/src/components/RefreshPauser.tsx
@@ -70,10 +70,14 @@ export function RefreshPauser(
         {disabled ? (
           <PauseIcon className="size-6 text-slate-400" aria-hidden="true" />
         ) : (
-          <ArrowPathIcon
-            className="size-6 text-slate-400 motion-safe:animate-spin-50-50"
-            aria-hidden="true"
-          />
+          // It's 2024 and this kind of div-wrapping hack is still necessary to get the
+          // spinner to animate without insane CPU usage:
+          <div className="size-6 overflow-hidden will-change-transform motion-safe:animate-spin-50-50">
+            <ArrowPathIcon
+              className="size-6 text-slate-400"
+              aria-hidden="true"
+            />
+          </div>
         )}
       </ListboxButton>
       <ListboxOptions className="absolute right-0 top-full mt-3 w-32 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts
index f6939c8..09c83e0 100644
--- a/ui/src/routeTree.gen.ts
+++ b/ui/src/routeTree.gen.ts
@@ -73,38 +73,65 @@ const AboutAboutRoute = AboutAboutImport.update({
 declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
     "/": {
+      id: "/"
+      path: "/"
+      fullPath: "/"
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
     "/jobs": {
+      id: "/jobs"
+      path: "/jobs"
+      fullPath: "/jobs"
       preLoaderRoute: typeof JobsImport
       parentRoute: typeof rootRoute
     }
     "/queues": {
+      id: "/queues"
+      path: "/queues"
+      fullPath: "/queues"
       preLoaderRoute: typeof QueuesImport
       parentRoute: typeof rootRoute
     }
     "/about/about": {
+      id: "/about/about"
+      path: "/about/about"
+      fullPath: "/about/about"
       preLoaderRoute: typeof AboutAboutImport
       parentRoute: typeof rootRoute
     }
     "/jobs/$jobId": {
+      id: "/jobs/$jobId"
+      path: "/$jobId"
+      fullPath: "/jobs/$jobId"
       preLoaderRoute: typeof JobsJobIdImport
       parentRoute: typeof JobsImport
     }
     "/queues/$name": {
+      id: "/queues/$name"
+      path: "/$name"
+      fullPath: "/queues/$name"
       preLoaderRoute: typeof QueuesNameImport
       parentRoute: typeof QueuesImport
     }
     "/workflows/$workflowId": {
+      id: "/workflows/$workflowId"
+      path: "/workflows/$workflowId"
+      fullPath: "/workflows/$workflowId"
       preLoaderRoute: typeof WorkflowsWorkflowIdImport
       parentRoute: typeof rootRoute
     }
     "/jobs/": {
+      id: "/jobs/"
+      path: "/"
+      fullPath: "/jobs/"
       preLoaderRoute: typeof JobsIndexImport
       parentRoute: typeof JobsImport
     }
     "/queues/": {
+      id: "/queues/"
+      path: "/"
+      fullPath: "/queues/"
       preLoaderRoute: typeof QueuesIndexImport
       parentRoute: typeof QueuesImport
     }
@@ -113,12 +140,68 @@ declare module "@tanstack/react-router" {
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren([
+export const routeTree = rootRoute.addChildren({
   IndexRoute,
-  JobsRoute.addChildren([JobsJobIdRoute, JobsIndexRoute]),
-  QueuesRoute.addChildren([QueuesNameRoute, QueuesIndexRoute]),
+  JobsRoute: JobsRoute.addChildren({ JobsJobIdRoute, JobsIndexRoute }),
+  QueuesRoute: QueuesRoute.addChildren({ QueuesNameRoute, QueuesIndexRoute }),
   AboutAboutRoute,
   WorkflowsWorkflowIdRoute,
-])
+})
 
 /* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/jobs",
+        "/queues",
+        "/about/about",
+        "/workflows/$workflowId"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/jobs": {
+      "filePath": "jobs.tsx",
+      "children": [
+        "/jobs/$jobId",
+        "/jobs/"
+      ]
+    },
+    "/queues": {
+      "filePath": "queues.tsx",
+      "children": [
+        "/queues/$name",
+        "/queues/"
+      ]
+    },
+    "/about/about": {
+      "filePath": "about/about.tsx"
+    },
+    "/jobs/$jobId": {
+      "filePath": "jobs/$jobId.tsx",
+      "parent": "/jobs"
+    },
+    "/queues/$name": {
+      "filePath": "queues/$name.tsx",
+      "parent": "/queues"
+    },
+    "/workflows/$workflowId": {
+      "filePath": "workflows/$workflowId.tsx"
+    },
+    "/jobs/": {
+      "filePath": "jobs/index.tsx",
+      "parent": "/jobs"
+    },
+    "/queues/": {
+      "filePath": "queues/index.tsx",
+      "parent": "/queues"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index 7377b52..a4d6a14 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -10,7 +10,7 @@ export default {
     extend: {
       animation: {
         "spin-slow": "spin 3s linear infinite",
-        "spin-50-50": "pausingSpin 6s infinite",
+        "spin-50-50": "pausingSpin 10s linear infinite",
       },
       colors: {
         "brand-primary": "rgb(37, 99, 235)",
@@ -24,12 +24,12 @@ export default {
             transform: "rotate(0)",
             animationTimingFunction: "ease-in-out",
           },
-          "42%,50%": { transform: "rotate(180deg)" },
+          "15%,50%": { transform: "rotate(180deg)" },
           "50%": {
             transform: "rotate(180deg)",
             animationTimingFunction: "ease-in-out",
           },
-          "92%,100%": { transform: "rotate(360deg)" },
+          "65%,100%": { transform: "rotate(360deg)" },
         },
       },
     },