fixed (i think)

src/components/Bars.tsx

@@ -1,14 +1,6 @@
 import { Typewriter } from "./Typewriter";
 import { useBars } from "~/context/bars";
-import {
-  onMount,
-  createEffect,
-  createSignal,
-  createResource,
-  Show,
-  For,
-  Suspense
-} from "solid-js";
+import { onMount, createEffect, createSignal, Show, For } from "solid-js";
 import { api } from "~/lib/api";
 import { TerminalSplash } from "./TerminalSplash";
 import { insertSoftHyphens } from "~/lib/client-utils";
@@ -18,40 +10,47 @@ import { RecentCommits } from "./RecentCommits";
 import { ActivityHeatmap } from "./ActivityHeatmap";
 import { DarkModeToggle } from "./DarkModeToggle";
 
+interface GitCommit {
+  sha: string;
+  message: string;
+  author: string;
+  date: string;
+  repo: string;
+  url: string;
+}
+
+interface ContributionDay {
+  date: string;
+  count: number;
+}
+
 export function RightBarContent() {
-  const [githubCommits] = createResource(async () => {
-    try {
-      return await api.gitActivity.getGitHubCommits.query({ limit: 3 });
-    } catch (error) {
-      console.error("Failed to fetch GitHub commits:", error);
-      return [];
-    }
-  });
+  const [githubCommits, setGithubCommits] = createSignal<GitCommit[]>([]);
+  const [giteaCommits, setGiteaCommits] = createSignal<GitCommit[]>([]);
+  const [githubActivity, setGithubActivity] = createSignal<ContributionDay[]>(
+    []
+  );
+  const [giteaActivity, setGiteaActivity] = createSignal<ContributionDay[]>([]);
+  const [loading, setLoading] = createSignal(true);
 
-  const [giteaCommits] = createResource(async () => {
+  onMount(async () => {
+    // Fetch all data client-side only to avoid hydration mismatch
     try {
-      return await api.gitActivity.getGiteaCommits.query({ limit: 3 });
-    } catch (error) {
-      console.error("Failed to fetch Gitea commits:", error);
-      return [];
-    }
-  });
+      const [ghCommits, gtCommits, ghActivity, gtActivity] = await Promise.all([
+        api.gitActivity.getGitHubCommits.query({ limit: 3 }).catch(() => []),
+        api.gitActivity.getGiteaCommits.query({ limit: 3 }).catch(() => []),
+        api.gitActivity.getGitHubActivity.query().catch(() => []),
+        api.gitActivity.getGiteaActivity.query().catch(() => [])
+      ]);
 
-  const [githubActivity] = createResource(async () => {
-    try {
-      return await api.gitActivity.getGitHubActivity.query();
+      setGithubCommits(ghCommits);
+      setGiteaCommits(gtCommits);
+      setGithubActivity(ghActivity);
+      setGiteaActivity(gtActivity);
     } catch (error) {
-      console.error("Failed to fetch GitHub activity:", error);
-      return [];
-    }
-  });
-
-  const [giteaActivity] = createResource(async () => {
-    try {
-      return await api.gitActivity.getGiteaActivity.query();
-    } catch (error) {
-      console.error("Failed to fetch Gitea activity:", error);
-      return [];
+      console.error("Failed to fetch git activity:", error);
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -111,29 +110,27 @@ export function RightBarContent() {
       </Typewriter>
 
       {/* Git Activity Section */}
-      <Suspense fallback={<TerminalSplash />}>
-        <hr class="border-overlay0" />
-        <div class="flex min-w-0 flex-col gap-6 px-4 pt-6">
-          <RecentCommits
-            commits={githubCommits()}
-            title="Recent GitHub Commits"
-            loading={githubCommits.loading}
-          />
-          <ActivityHeatmap
-            contributions={githubActivity()}
-            title="GitHub Activity"
-          />
-          <RecentCommits
-            commits={giteaCommits()}
-            title="Recent Gitea Commits"
-            loading={giteaCommits.loading}
-          />
-          <ActivityHeatmap
-            contributions={giteaActivity()}
-            title="Gitea Activity"
-          />
-        </div>
-      </Suspense>
+      <hr class="border-overlay0" />
+      <div class="flex min-w-0 flex-col gap-6 px-4 pt-6">
+        <RecentCommits
+          commits={githubCommits()}
+          title="Recent GitHub Commits"
+          loading={loading()}
+        />
+        <ActivityHeatmap
+          contributions={githubActivity()}
+          title="GitHub Activity"
+        />
+        <RecentCommits
+          commits={giteaCommits()}
+          title="Recent Gitea Commits"
+          loading={loading()}
+        />
+        <ActivityHeatmap
+          contributions={giteaActivity()}
+          title="Gitea Activity"
+        />
+      </div>
     </div>
   );
 }

src/components/TerminalSplash.tsx

@@ -6,18 +6,18 @@ const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "
 export function TerminalSplash() {
   const [showing, setShowing] = createSignal(0);
 
-  // Only run animation on client
-  if (!isServer) {
-    onMount(() => {
-      const interval = setInterval(() => {
-        setShowing((prev) => (prev + 1) % spinnerChars.length);
-      }, 50);
+  onMount(() => {
+    // Only run animation on client
+    if (isServer) return;
 
-      onCleanup(() => {
-        clearInterval(interval);
-      });
+    const interval = setInterval(() => {
+      setShowing((prev) => (prev + 1) % spinnerChars.length);
+    }, 50);
+
+    onCleanup(() => {
+      clearInterval(interval);
     });
-  }
+  });
 
   return (
     <div class="bg-base flex min-h-screen w-full flex-col items-center justify-center overflow-hidden">

src/env/server.ts

@@ -177,29 +177,42 @@ export const validateClientEnv = (
   }
 };
 
-// Environment validation for server startup with better error reporting
-export const env = (() => {
-  try {
-    // Validate server environment variables using process.env
-    const validatedServerEnv = validateServerEnv(process.env);
+// Lazy environment validation - only validates when accessed
+let _cachedEnv: ServerEnv | null = null;
+let _validationAttempted = false;
 
-    console.log("✅ Environment validation successful");
-    return validatedServerEnv;
-  } catch (error) {
-    if (error instanceof EnvironmentError) {
-      console.error("❌ Environment validation failed:", error.message);
-      if (error.errors) {
-        console.error(
-          "Detailed errors:",
-          JSON.stringify(error.errors, null, 2)
-        );
+export const env = new Proxy({} as ServerEnv, {
+  get(_target, prop: string) {
+    // Only validate once
+    if (!_validationAttempted) {
+      _validationAttempted = true;
+      try {
+        // Validate server environment variables using process.env
+        _cachedEnv = validateServerEnv(process.env);
+        console.log("✅ Environment validation successful");
+      } catch (error) {
+        if (error instanceof EnvironmentError) {
+          console.error("❌ Environment validation failed:", error.message);
+          if (error.errors) {
+            console.error(
+              "Detailed errors:",
+              JSON.stringify(error.errors, null, 2)
+            );
+          }
+          throw new Error(`Environment validation failed: ${error.message}`);
+        }
+        console.error("❌ Unexpected environment validation error:", error);
+        throw new Error("Unexpected environment validation error occurred");
       }
-      throw new Error(`Environment validation failed: ${error.message}`);
     }
-    console.error("❌ Unexpected environment validation error:", error);
-    throw new Error("Unexpected environment validation error occurred");
+
+    if (!_cachedEnv) {
+      throw new Error("Environment validation has not been performed yet");
+    }
+
+    return _cachedEnv[prop as keyof ServerEnv];
   }
-})();
+});
 
 // For client-side validation (useful in components)
 export const getClientEnvValidation = () => {

src/lib/api.ts

@@ -1,5 +1,4 @@
 import { createTRPCProxyClient, httpBatchLink, loggerLink } from "@trpc/client";
-import { env } from "~/env/server";
 import { AppRouter } from "~/server/api/root";
 
 export const api = createTRPCProxyClient<AppRouter>({
@@ -7,6 +6,6 @@ export const api = createTRPCProxyClient<AppRouter>({
     // will print out helpful logs when using client
     loggerLink(),
     // identifies what url will handle trpc requests
-    httpBatchLink({ url: `${env.VITE_DOMAIN}/api/trpc` })
+    httpBatchLink({ url: `${import.meta.env.VITE_DOMAIN}/api/trpc` })
   ]
 });