chore: add perf improvements

Author: tyler-dane

packages/web/src/routers/index.test.tsx

@@ -4,10 +4,19 @@ import { describe, expect, it } from "bun:test";
 
 describe("routeObjects", () => {
   it("registers /life as a public route before authenticated app routes", () => {
-    const [lifeRoute, authenticatedRoute] = routeObjects;
+    const lifeRoute = routeObjects.find((r) => r.path === ROOT_ROUTES.LIFE);
+    const lifeRouteIndex = routeObjects.findIndex(
+      (r) => r.path === ROOT_ROUTES.LIFE,
+    );
+    const authenticatedRoute = routeObjects.find((r) => r.loader !== undefined);
+    const authenticatedRouteIndex = routeObjects.findIndex(
+      (r) => r.loader !== undefined,
+    );
 
-    expect(lifeRoute.path).toBe(ROOT_ROUTES.LIFE);
-    expect(lifeRoute.loader).toBeUndefined();
-    expect(authenticatedRoute.loader).toBeDefined();
+    expect(lifeRoute).toBeDefined();
+    expect(lifeRoute?.loader).toBeUndefined();
+    expect(authenticatedRoute).toBeDefined();
+    expect(authenticatedRoute?.loader).toBeDefined();
+    expect(lifeRouteIndex).toBeLessThan(authenticatedRouteIndex);
   });
 });

packages/web/src/views/Life/LifeAboutDialog.tsx

@@ -38,6 +38,8 @@ export function LifeAboutDialog() {
               <a
                 className="text-accent-primary underline hover:no-underline"
                 href={BLOG_LINK}
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 Visualize Your Life in Weeks
               </a>

packages/web/src/views/Life/LifeSelect.tsx

@@ -15,7 +15,7 @@ export function LifeSelect({
   value,
   onChange,
   children,
-  className = "max-w-35",
+  className = "max-w-36",
 }: LifeSelectProps) {
   const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
     onChange(event.target.value);

packages/web/src/views/Life/LifeView.tsx

@@ -126,6 +126,33 @@ export function LifeView({ enableDotTooltips = true, today }: LifeViewProps) {
     [birthYear, birthMonth, birthDay, totalDots, today],
   );
   const columns = getLifeGridColumns({ isMobile, zoom });
+  const dots = useMemo(() => {
+    return Array.from({ length: totalDots }).map((_, index) => {
+      const weekNumber = index + 1;
+      const isFilled = index < weeksLived;
+      const dot = (
+        <span
+          className={`block h-2 w-2 rounded-[1px] transition-colors ${
+            isFilled
+              ? "bg-accent-primary"
+              : "border border-border-primary bg-bg-primary"
+          }`}
+          key={weekNumber}
+          title={`Week ${weekNumber}`}
+        />
+      );
+
+      if (enableDotTooltips) {
+        return (
+          <LifeDotTooltip key={weekNumber} weekNumber={weekNumber}>
+            {dot}
+          </LifeDotTooltip>
+        );
+      }
+
+      return dot;
+    });
+  }, [totalDots, weeksLived, enableDotTooltips]);
 
   useEffect(() => {
     const maxDay = Number.parseInt(validDays.at(-1) ?? "31", 10);
@@ -341,29 +368,7 @@ export function LifeView({ enableDotTooltips = true, today }: LifeViewProps) {
                   gridTemplateColumns: `repeat(${columns}, ${DOT_SIZE}px)`,
                 }}
               >
-                {Array.from({ length: totalDots }).map((_, index) => {
-                  const weekNumber = index + 1;
-                  const isFilled = index < weeksLived;
-                  const dot = (
-                    <span
-                      className={`block h-2 w-2 rounded-[1px] transition-colors ${
-                        isFilled
-                          ? "bg-accent-primary"
-                          : "border border-border-primary bg-bg-primary"
-                      }`}
-                      key={weekNumber}
-                      title={`Week ${weekNumber}`}
-                    />
-                  );
-
-                  return enableDotTooltips ? (
-                    <LifeDotTooltip key={weekNumber} weekNumber={weekNumber}>
-                      {dot}
-                    </LifeDotTooltip>
-                  ) : (
-                    <span key={weekNumber}>{dot}</span>
-                  );
-                })}
+                {dots}
               </div>
             </div>
           </div>