fixed (i think)

src/components/Bars.tsx

@@ -1,14 +1,6 @@
 import { Typewriter } from "./Typewriter";
 import { useBars } from "~/context/bars";
-import {
+import { onMount, createEffect, createSignal, Show, For } from "solid-js";
-  onMount,
-  createEffect,
-  createSignal,
-  createResource,
-  Show,
-  For,
-  Suspense
-} 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 () => {
+  const [githubCommits, setGithubCommits] = createSignal<GitCommit[]>([]);
-    try {
+  const [giteaCommits, setGiteaCommits] = createSignal<GitCommit[]>([]);
-      return await api.gitActivity.getGitHubCommits.query({ limit: 3 });
+  const [githubActivity, setGithubActivity] = createSignal<ContributionDay[]>(
-    } catch (error) {
+    []
-      console.error("Failed to fetch GitHub commits:", error);
+  );
-      return [];
+  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 });
+      const [ghCommits, gtCommits, ghActivity, gtActivity] = await Promise.all([
-    } catch (error) {
+        api.gitActivity.getGitHubCommits.query({ limit: 3 }).catch(() => []),
-      console.error("Failed to fetch Gitea commits:", error);
+        api.gitActivity.getGiteaCommits.query({ limit: 3 }).catch(() => []),
-      return [];
+        api.gitActivity.getGitHubActivity.query().catch(() => []),
-    }
+        api.gitActivity.getGiteaActivity.query().catch(() => [])
-  });
+      ]);
 
-  const [githubActivity] = createResource(async () => {
+      setGithubCommits(ghCommits);
-    try {
+      setGiteaCommits(gtCommits);
-      return await api.gitActivity.getGitHubActivity.query();
+      setGithubActivity(ghActivity);
+      setGiteaActivity(gtActivity);
     } catch (error) {
-      console.error("Failed to fetch GitHub activity:", error);
+      console.error("Failed to fetch git activity:", error);
-      return [];
+    } finally {
-    }
+      setLoading(false);
-  });
-
-  const [giteaActivity] = createResource(async () => {
-    try {
-      return await api.gitActivity.getGiteaActivity.query();
-    } catch (error) {
-      console.error("Failed to fetch Gitea activity:", error);
-      return [];
     }
   });
 
@@ -111,13 +110,12 @@ 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}
+          loading={loading()}
         />
         <ActivityHeatmap
           contributions={githubActivity()}
@@ -126,14 +124,13 @@ export function RightBarContent() {
         <RecentCommits
           commits={giteaCommits()}
           title="Recent Gitea Commits"
-            loading={giteaCommits.loading}
+          loading={loading()}
         />
         <ActivityHeatmap
           contributions={giteaActivity()}
           title="Gitea Activity"
         />
       </div>
-      </Suspense>
     </div>
   );
 }

src/components/TerminalSplash.tsx

@@ -6,9 +6,10 @@ const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "
 export function TerminalSplash() {
   const [showing, setShowing] = createSignal(0);
 
-  // Only run animation on client
-  if (!isServer) {
   onMount(() => {
+    // Only run animation on client
+    if (isServer) return;
+
     const interval = setInterval(() => {
       setShowing((prev) => (prev + 1) % spinnerChars.length);
     }, 50);
@@ -17,7 +18,6 @@ export function TerminalSplash() {
       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,14 +177,19 @@ export const validateClientEnv = (
   }
 };
 
-// Environment validation for server startup with better error reporting
+// Lazy environment validation - only validates when accessed
-export const env = (() => {
+let _cachedEnv: ServerEnv | null = null;
+let _validationAttempted = false;
+
+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
-    const validatedServerEnv = validateServerEnv(process.env);
+        _cachedEnv = validateServerEnv(process.env);
-
         console.log("✅ Environment validation successful");
-    return validatedServerEnv;
       } catch (error) {
         if (error instanceof EnvironmentError) {
           console.error("❌ Environment validation failed:", error.message);
@@ -199,7 +204,15 @@ export const env = (() => {
         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` })
   ]
 });