perf improvements

2026-01-04 14:53:30 -05:00
parent 111712e969
commit a620a9f4c5
10 changed files with 303 additions and 1750 deletions
--- a/src/routes/blog/index.tsx
+++ b/src/routes/blog/index.tsx
@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Show, createSignal, onMount, lazy } from "solid-js";
 import { useSearchParams, A, query } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
 import { createAsync } from "@solidjs/router";
@@ -6,11 +6,15 @@ import { getRequestEvent } from "solid-js/web";
 import PostSortingSelect from "~/components/blog/PostSortingSelect";
 import TagSelector from "~/components/blog/TagSelector";
 import PostSorting from "~/components/blog/PostSorting";
-import PublishStatusToggle from "~/components/blog/PublishStatusToggle";
 import { TerminalSplash } from "~/components/TerminalSplash";
 import { CACHE_CONFIG } from "~/config";

-const getPosts = query(async () => {
+const PublishStatusToggle = lazy(() => import("~/components/blog/PublishStatusToggle"));
+
+const POSTS_PER_PAGE = 12;
+
+// Separate query for all tags (needed for TagSelector)
+const getAllTags = query(async () => {
  "use server";
  const { ConnectionFactory, getPrivilegeLevel } =
    await import("~/server/utils");
@@ -19,17 +23,61 @@ const getPosts = query(async () => {
  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);

  return withCache(
-    `posts-${privilegeLevel}`,
+    `all-tags-${privilegeLevel}`,
    CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
    async () => {
      const conn = ConnectionFactory();

+      const tagsQuery = `
+        SELECT t.value, t.post_id
+        FROM Tag t
+        JOIN Post p ON t.post_id = p.id
+        ${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
+        ORDER BY t.value ASC
+      `;
+
+      const tagsResult = await conn.execute(tagsQuery);
+      const tags = tagsResult.rows;
+
+      const tagMap: Record<string, number> = {};
+      tags.forEach((tag: any) => {
+        const key = `${tag.value}`;
+        tagMap[key] = (tagMap[key] || 0) + 1;
+      });
+
+      return { tagMap, privilegeLevel };
+    }
+  );
+}, "all-tags");
+
+const getPosts = query(async (page: number = 1) => {
+  "use server";
+  const { ConnectionFactory, getPrivilegeLevel } =
+    await import("~/server/utils");
+  const { withCache } = await import("~/server/cache");
+  const event = getRequestEvent()!;
+  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
+
+  return withCache(
+    `posts-${privilegeLevel}-page-${page}`,
+    CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
+    async () => {
+      const conn = ConnectionFactory();
+      const offset = (page - 1) * POSTS_PER_PAGE;
+
+      // Get total count first
+      let countQuery = `SELECT COUNT(*) as total FROM Post p`;
+      if (privilegeLevel !== "admin") {
+        countQuery += ` WHERE p.published = TRUE`;
+      }
+      const countResult = await conn.execute(countQuery);
+      const totalPosts = (countResult.rows[0] as any).total;
+
      let postsQuery = `
      SELECT 
        p.id,
        p.title,
        p.subtitle,
-        p.body,
        p.banner_photo,
        p.date,
        p.published,
@@ -48,96 +96,185 @@ const getPosts = query(async () => {
        postsQuery += ` WHERE p.published = TRUE`;
      }

-      postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
-      postsQuery += ` ORDER BY p.date ASC;`;
+      postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
+      postsQuery += ` ORDER BY p.date ASC`;
+      postsQuery += ` LIMIT ${POSTS_PER_PAGE} OFFSET ${offset};`;

      const postsResult = await conn.execute(postsQuery);
      const posts = postsResult.rows;

-      const tagsQuery = `
+      // Only fetch tags for the posts we're returning
+      const postIds = posts.map((p: any) => p.id).join(",");
+      const tagsQuery = postIds
+        ? `
      SELECT t.value, t.post_id
      FROM Tag t
-      JOIN Post p ON t.post_id = p.id
-      ${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
+      WHERE t.post_id IN (${postIds})
      ORDER BY t.value ASC
-    `;
+    `
+        : `SELECT t.value, t.post_id FROM Tag t WHERE 1=0`;

      const tagsResult = await conn.execute(tagsQuery);
      const tags = tagsResult.rows;

-      const tagMap: Record<string, number> = {};
-      tags.forEach((tag: any) => {
-        const key = `${tag.value}`;
-        tagMap[key] = (tagMap[key] || 0) + 1;
-      });
-
-      return { posts, tags, tagMap, privilegeLevel };
+      return {
+        posts,
+        tags,
+        hasMore: offset + posts.length < totalPosts,
+        totalPosts
+      };
    }
  );
 }, "posts");

 export default function BlogIndex() {
  const [searchParams] = useSearchParams();
+  const [currentPage, setCurrentPage] = createSignal(1);
+  const [allPosts, setAllPosts] = createSignal<any[]>([]);
+  const [allTags, setAllTags] = createSignal<any[]>([]);
+  const [hasMore, setHasMore] = createSignal(true);
+  const [isLoading, setIsLoading] = createSignal(false);
+  let sentinelRef: HTMLDivElement | undefined;

-  const sort = () => searchParams.sort || "newest";
-  const filters = () =>
-    "filter" in searchParams ? searchParams.filter : undefined;
-  const include = () =>
-    "include" in searchParams ? searchParams.include : undefined;
-  const status = () =>
-    "status" in searchParams ? searchParams.status : undefined;
+  const sort = () => {
+    const sortParam = searchParams.sort;
+    return Array.isArray(sortParam) ? sortParam[0] : sortParam || "newest";
+  };
+  const filters = () => {
+    const filterParam = searchParams.filter;
+    return filterParam
+      ? Array.isArray(filterParam)
+        ? filterParam[0]
+        : filterParam
+      : undefined;
+  };
+  const include = () => {
+    const includeParam = searchParams.include;
+    return includeParam
+      ? Array.isArray(includeParam)
+        ? includeParam[0]
+        : includeParam
+      : undefined;
+  };
+  const status = () => {
+    const statusParam = searchParams.status;
+    return statusParam
+      ? Array.isArray(statusParam)
+        ? statusParam[0]
+        : statusParam
+      : undefined;
+  };

-  const data = createAsync(() => getPosts(), { deferStream: true });
+  // Load initial page and tag data
+  const initialData = createAsync(() => getPosts(1), { deferStream: true });
+  const tagsData = createAsync(() => getAllTags(), { deferStream: true });
+
+  // Initialize with first page data
+  const initializeData = () => {
+    const firstPage = initialData();
+    if (firstPage) {
+      setAllPosts(firstPage.posts);
+      setAllTags(firstPage.tags);
+      setHasMore(firstPage.hasMore);
+    }
+  };
+
+  // Load more posts
+  const loadMorePosts = async () => {
+    if (isLoading() || !hasMore()) return;
+
+    setIsLoading(true);
+    const nextPage = currentPage() + 1;
+
+    try {
+      const newData = await getPosts(nextPage);
+      setAllPosts((prev) => [...prev, ...newData.posts]);
+      setAllTags((prev) => [...prev, ...newData.tags]);
+      setHasMore(newData.hasMore);
+      setCurrentPage(nextPage);
+    } catch (error) {
+      console.error("Error loading more posts:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Set up IntersectionObserver for infinite scroll
+  onMount(() => {
+    initializeData();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMorePosts();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+
+    if (sentinelRef) {
+      observer.observe(sentinelRef);
+    }
+
+    return () => observer.disconnect();
+  });

  return (
    <>
      <Title>Blog | Michael Freno</Title>

      <div class="mx-auto py-16 pb-24">
-        <Show when={data()} fallback={<TerminalSplash />}>
-          {(loadedData) => (
-            <>
-              <div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
-                <PostSortingSelect />
+        <Show when={initialData() && tagsData()} fallback={<TerminalSplash />}>
+          <div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
+            <PostSortingSelect />

-                <Show when={Object.keys(loadedData().tagMap).length > 0}>
-                  <TagSelector tagMap={loadedData().tagMap} />
-                </Show>
+            <Show
+              when={tagsData() && Object.keys(tagsData()!.tagMap).length > 0}
+            >
+              <TagSelector tagMap={tagsData()!.tagMap} />
+            </Show>

-                <Show when={loadedData().privilegeLevel === "admin"}>
-                  <PublishStatusToggle />
-                </Show>
+            <Show when={tagsData()?.privilegeLevel === "admin"}>
+              <PublishStatusToggle />
+            </Show>

-                <Show when={loadedData().privilegeLevel === "admin"}>
-                  <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
-                    <A
-                      href="/blog/create"
-                      class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
-                    >
-                      Create Post
-                    </A>
-                  </div>
-                </Show>
+            <Show when={tagsData()?.privilegeLevel === "admin"}>
+              <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
+                <A
+                  href="/blog/create"
+                  class="border-text rounded border px-4 py-2 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
+                >
+                  Create Post
+                </A>
              </div>
+            </Show>
+          </div>

-              <Show
-                when={loadedData().posts.length > 0}
-                fallback={<div class="pt-12 text-center">No posts yet!</div>}
-              >
-                <div class="mx-auto flex w-11/12 flex-col pt-8">
-                  <PostSorting
-                    posts={loadedData().posts}
-                    tags={loadedData().tags}
-                    privilegeLevel={loadedData().privilegeLevel}
-                    filters={filters()}
-                    sort={sort()}
-                    include={include()}
-                    status={status()}
-                  />
+          <Show
+            when={allPosts().length > 0}
+            fallback={<div class="pt-12 text-center">No posts yet!</div>}
+          >
+            <div class="mx-auto flex w-11/12 flex-col pt-8">
+              <PostSorting
+                posts={allPosts()}
+                tags={allTags()}
+                privilegeLevel={tagsData()!.privilegeLevel}
+                filters={filters()}
+                sort={sort()}
+                include={include()}
+                status={status()}
+              />
+
+              {/* Sentinel element for infinite scroll */}
+              <Show when={hasMore()}>
+                <div ref={sentinelRef} class="py-8 text-center">
+                  <Show when={isLoading()}>
+                    <div class="text-lg">Loading more posts...</div>
+                  </Show>
                </div>
              </Show>
-            </>
-          )}
+            </div>
+          </Show>
        </Show>
      </div>
    </>
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -65,6 +65,8 @@ export default function Home() {
                  <div class="aspect-auto w-full overflow-hidden rounded-lg">
                    <video
                      src="/flexlove-scrollable.mp4"
+                      width={1280}
+                      height={1290}
                      class="h-full w-full object-cover"
                      autoplay
                      loop
@@ -75,6 +77,8 @@ export default function Home() {
                  <div class="aspect-auto w-full overflow-hidden rounded-lg">
                    <video
                      src="/flexlove-input.mp4"
+                      width={1148}
+                      height={140}
                      class="h-full w-full object-cover"
                      autoplay
                      loop
@@ -85,6 +89,8 @@ export default function Home() {
                  <div class="aspect-auto w-full overflow-hidden rounded-lg">
                    <video
                      src="/flexlove-slider.mp4"
+                      width={1256}
+                      height={134}
                      class="h-full w-full object-cover"
                      autoplay
                      loop
@@ -118,6 +124,8 @@ export default function Home() {
                  <div class="aspect-auto w-full overflow-hidden rounded-lg sm:col-span-1">
                    <video
                      src="/lineage-preview.mp4"
+                      width={886}
+                      height={1920}
                      class="h-full w-full object-cover"
                      autoplay
                      loop
@@ -130,6 +138,8 @@ export default function Home() {
                      <img
                        src="/lineage-home.png"
                        alt="Life and Lineage Home"
+                        width={1320}
+                        height={2868}
                        class="h-full w-full object-cover"
                      />
                    </div>
@@ -137,6 +147,8 @@ export default function Home() {
                      <img
                        src="/lineage-shops.png"
                        alt="Life and Lineage Shops"
+                        width={608}
+                        height={1322}
                        class="h-full w-full object-cover"
                      />
                    </div>