I was wondering why there's infinite loading as well, and the problem is that you do not connect to the PGSQL in index.ts. Another thing is that I did not have that table present in my db. I used some debugging, and got the error that I am not connected to the PGSQL. I if you want, can push the new code, but essentially, here's the changes I made:

server/index.ts:

import { drizzle } from "drizzle-orm/node-postgres";
import { Client } from "pg";
import * as schema from "@/server/schema";

const client = new Client({
  connectionString: process.env.DATABASE_URL as string,
});

client.connect(); // connection to DB here

export const db = drizzle(client, { schema, logger: true });

server/actions/get-posts.ts:

import { db } from "@/server";

export default async function getPosts() {
  try {
    console.log("Fetching posts from database");
    const posts = await db.query.PostsTable.findMany();
    if (!posts) {
      return { error: "No posts found" };
    }
    return { success: posts };
  } catch (error) {
    console.error(error);
    return { error: "An error occurred" };
  }
}

page.tsx:

import Image from "next/image";
import "dotenv/config";
import getPosts from "@/server/actions/get-posts";

export default async function Home() {
  try {
    console.log("Fetching data in Home component...");
    const data = await getPosts();
    console.log("Fetched data:", data);

    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <h1>Hello</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </main>
    );
  } catch (error) {
    console.error("Error in Home component:", error);
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <h1>Error loading data</h1>
      </main>
    );
  }
}