perf improvements

src/components/Bars.tsx

@@ -265,47 +265,60 @@ export function LeftBar() {
     const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
     const originalText = "What's this?";
     let glitchInterval: NodeJS.Timeout;
+    let animationFrame: number;
 
     setTimeout(() => {
       setGetLostVisible(true);
 
       let currentIndex = 0;
-      const typeInterval = setInterval(() => {
-        if (currentIndex <= originalText.length) {
-          let displayText = originalText.substring(0, currentIndex);
-          if (currentIndex < originalText.length) {
-            const remaining = originalText.length - currentIndex;
-            for (let i = 0; i < remaining; i++) {
-              displayText +=
-                glitchChars[Math.floor(Math.random() * glitchChars.length)];
-            }
-          }
-          setGetLostText(displayText);
-          currentIndex++;
-        } else {
-          clearInterval(typeInterval);
-          setGetLostText(originalText);
+      let lastUpdate = 0;
+      const updateInterval = 80; // ms between updates
 
-          glitchInterval = setInterval(() => {
-            if (Math.random() > 0.9) {
-              let glitched = "";
-              for (let i = 0; i < originalText.length; i++) {
-                if (Math.random() > 0.7) {
-                  glitched +=
-                    glitchChars[Math.floor(Math.random() * glitchChars.length)];
-                } else {
-                  glitched += originalText[i];
-                }
+      const revealAnimation = (timestamp: number) => {
+        if (timestamp - lastUpdate >= updateInterval) {
+          if (currentIndex <= originalText.length) {
+            let displayText = originalText.substring(0, currentIndex);
+            if (currentIndex < originalText.length) {
+              const remaining = originalText.length - currentIndex;
+              for (let i = 0; i < remaining; i++) {
+                displayText +=
+                  glitchChars[Math.floor(Math.random() * glitchChars.length)];
               }
-              setGetLostText(glitched);
-
-              setTimeout(() => {
-                setGetLostText(originalText);
-              }, 100);
             }
-          }, 150);
+            setGetLostText(displayText);
+            currentIndex++;
+            lastUpdate = timestamp;
+          } else {
+            setGetLostText(originalText);
+
+            // Occasional glitch effect after reveal
+            glitchInterval = setInterval(() => {
+              if (Math.random() > 0.92) {
+                let glitched = "";
+                for (let i = 0; i < originalText.length; i++) {
+                  if (Math.random() > 0.75) {
+                    glitched +=
+                      glitchChars[
+                        Math.floor(Math.random() * glitchChars.length)
+                      ];
+                  } else {
+                    glitched += originalText[i];
+                  }
+                }
+                setGetLostText(glitched);
+
+                setTimeout(() => {
+                  setGetLostText(originalText);
+                }, 80);
+              }
+            }, 200);
+            return;
+          }
         }
-      }, 140);
+        animationFrame = requestAnimationFrame(revealAnimation);
+      };
+
+      animationFrame = requestAnimationFrame(revealAnimation);
     }, 500);
 
     if (ref) {
@@ -345,11 +358,13 @@ export function LeftBar() {
       onCleanup(() => {
         ref?.removeEventListener("keydown", handleKeyDown);
         clearInterval(glitchInterval);
+        if (animationFrame) cancelAnimationFrame(animationFrame);
         window.removeEventListener("resize", handleResize);
       });
     } else {
       onCleanup(() => {
         clearInterval(glitchInterval);
+        if (animationFrame) cancelAnimationFrame(animationFrame);
         window.removeEventListener("resize", handleResize);
       });
     }
@@ -586,7 +601,8 @@ export function LeftBar() {
                     navigate(randomUrl);
                     handleLinkClick();
                   }}
-                  class="text-left font-mono"
+                  class="text-left font-mono transition-opacity duration-75"
+                  style={{ "will-change": "contents" }}
                 >
                   {getLostText()}
                 </button>

src/components/blog/Card.tsx

@@ -1,12 +1,14 @@
-import { Show } from "solid-js";
+import { Show, lazy } from "solid-js";
 import CardLinks from "./CardLinks";
-import DeletePostButton from "./DeletePostButton";
 import { Fire } from "~/components/icons/Fire";
-import { Post } from "~/db/types";
+import { PostCardData } from "~/db/types";
+
+const DeletePostButton = lazy(() => import("./DeletePostButton"));
 
 export interface CardProps {
-  post: Post;
+  post: PostCardData;
   privilegeLevel: "anonymous" | "admin" | "user";
+  index?: number;
 }
 
 export default function Card(props: CardProps) {
@@ -27,6 +29,12 @@ export default function Card(props: CardProps) {
       <img
         src={props.post.banner_photo ?? ""}
         alt={props.post.title.replaceAll("_", " ") + " banner"}
+        loading={
+          props.index !== undefined && props.index < 3 ? "eager" : "lazy"
+        }
+        fetchpriority={props.index === 0 ? "high" : "auto"}
+        width={1200}
+        height={630}
         class="h-full w-full object-cover"
       />
       <div class="border-opacity-20 bg-opacity-40 bg-crust border-text absolute bottom-0 w-full border-t px-2 py-4 backdrop-blur-md md:px-6">

src/components/blog/PostSorting.tsx

@@ -1,6 +1,6 @@
 import { For, Show, createMemo } from "solid-js";
 import Card from "./Card";
-import { Post } from "~/db/types";
+import { PostCardData } from "~/db/types";
 
 export interface Tag {
   value: string;
@@ -8,7 +8,7 @@ export interface Tag {
 }
 
 export interface PostSortingProps {
-  posts: Post[];
+  posts: PostCardData[];
   tags: Tag[];
   privilegeLevel: "anonymous" | "admin" | "user";
   filters?: string;
@@ -133,9 +133,13 @@ export default function PostSorting(props: PostSortingProps) {
       }
     >
       <For each={sortedPosts()}>
-        {(post) => (
+        {(post, index) => (
           <div class="my-4">
-            <Card post={post} privilegeLevel={props.privilegeLevel} />
+            <Card
+              post={post}
+              privilegeLevel={props.privilegeLevel}
+              index={index()}
+            />
           </div>
         )}
       </For>