diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
index 455a18746..a3bca9946 100644
--- a/apps/cyberstorm-remix/app/c/community.tsx
+++ b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,5 +1,10 @@
-import type { LoaderFunctionArgs, MetaFunction } from "react-router";
-import { useLoaderData, useOutletContext } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
+import {
+  Await,
+  useLoaderData,
+  useLocation,
+  useOutletContext,
+} from "react-router";
 import {
   NewBreadCrumbs,
   NewBreadCrumbsLink,
@@ -20,47 +25,7 @@ import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
-
-export const meta: MetaFunction<typeof loader> = ({ data, location }) => {
-  return [
-    { title: `Thunderstore - The ${data?.community.name} Mod Database` },
-    { name: "description", content: `Mods for ${data?.community.name}` },
-    {
-      property: "og:type",
-      content: "website",
-    },
-    {
-      property: "og:url",
-      content: `${import.meta.env.VITE_SITE_URL}${location.pathname}`,
-    },
-    {
-      property: "og:title",
-      content: `Thunderstore - The ${data?.community.name} Mod Database`,
-    },
-    {
-      property: "og:description",
-      content: data
-        ? `Thunderstore is a mod database and API for downloading ${data.community.name} mods`
-        : undefined,
-    },
-    {
-      property: "og:image:width",
-      content: "360",
-    },
-    {
-      property: "og:image:height",
-      content: "480",
-    },
-    {
-      property: "og:image",
-      content: data?.community.cover_image_url,
-    },
-    {
-      property: "og:site_name",
-      content: "Thunderstore",
-    },
-  ];
-};
+import { Suspense } from "react";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
   if (params.communityId) {
@@ -81,7 +46,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     const section = searchParams.get("section");
     const nsfw = searchParams.get("nsfw");
     const deprecated = searchParams.get("deprecated");
-    const community = await dapper.getCommunity(params.communityId);
+    const community = dapper.getCommunity(params.communityId);
     const filters = await dapper.getCommunityFilters(params.communityId);
     const sortedSections = filters.sections.sort(
       (a, b) => b.priority - a.priority
@@ -89,7 +54,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     return {
       community: community,
       filters: filters,
-      listings: await dapper.getPackageListings(
+      listings: dapper.getPackageListings(
         {
           kind: "community",
           communityId: params.communityId,
@@ -134,7 +99,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     const section = searchParams.get("section");
     const nsfw = searchParams.get("nsfw");
     const deprecated = searchParams.get("deprecated");
-    const community = await dapper.getCommunity(params.communityId);
+    const community = dapper.getCommunity(params.communityId);
     const filters = await dapper.getCommunityFilters(params.communityId);
     const sortedSections = filters.sections.sort(
       (a, b) => b.priority - a.priority
@@ -142,7 +107,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     return {
       community: community,
       filters: filters,
-      listings: await dapper.getPackageListings(
+      listings: dapper.getPackageListings(
         {
           kind: "community",
           communityId: params.communityId,
@@ -174,19 +139,68 @@ export default function Community() {
   >();
 
   const outletContext = useOutletContext() as OutletContextShape;
+  const location = useLocation();
 
   return (
     <>
-      <div className="community__background">
-        {community.hero_image_url ? (
-          <img
-            src={community.hero_image_url}
-            alt={community.name}
-            className="community__background-image"
-          />
-        ) : null}
-        <div className="community__background-tint" />
-      </div>
+      <Suspense>
+        <Await resolve={community}>
+          {(resolvedValue) => {
+            return (
+              <>
+                <meta
+                  title={`Thunderstore - The ${resolvedValue.name} Mod Database`}
+                />
+                <meta
+                  name="description"
+                  content={`Mods for ${resolvedValue.name}`}
+                />
+                <meta property="og:type" content="website" />
+                <meta
+                  property="og:url"
+                  content={`${
+                    getPublicEnvVariables(["VITE_SITE_URL"]).VITE_SITE_URL
+                  }${location.pathname}`}
+                />
+                <meta
+                  property="og:title"
+                  content={`Thunderstore - The ${resolvedValue.name} Mod Database`}
+                />
+                <meta
+                  property="og:description"
+                  content={`Thunderstore is a mod database and API for downloading ${resolvedValue.name} mods`}
+                />
+                <meta property="og:image:width" content="360" />
+                <meta property="og:image:height" content="480" />
+                <meta
+                  property="og:image"
+                  content={resolvedValue.cover_image_url ?? undefined}
+                />
+                <meta property="og:site_name" content="Thunderstore" />
+              </>
+            );
+          }}
+        </Await>
+      </Suspense>
+
+      <Suspense>
+        <Await resolve={community}>
+          {(resolvedValue) => {
+            return resolvedValue.hero_image_url ? (
+              <>
+                <div className="community__background">
+                  <img
+                    src={resolvedValue.hero_image_url}
+                    alt={resolvedValue.name}
+                    className="community__background-image"
+                  />
+                  <div className="community__background-tint" />
+                </div>
+              </>
+            ) : null;
+          }}
+        </Await>
+      </Suspense>
       <div className="container container--y container--full layout__content community">
         <NewBreadCrumbs>
           <NewBreadCrumbsLink
@@ -197,53 +211,70 @@ export default function Community() {
             Communities
           </NewBreadCrumbsLink>
           <span>
-            <span>{community.name}</span>
+            <span>
+              <Suspense fallback={<>Loading</>}>
+                <Await resolve={community} errorElement={<></>}>
+                  {(resolvedValue) => {
+                    return <>{resolvedValue.name}</>;
+                  }}
+                </Await>
+              </Suspense>
+            </span>
           </span>
         </NewBreadCrumbs>
-        <PageHeader
-          headingLevel="1"
-          headingSize="3"
-          variant="simple"
-          icon={community.community_icon_url}
-          meta={
-            <>
-              {community.wiki_url ? (
-                <NewLink
-                  primitiveType="link"
-                  href={community.wiki_url}
-                  csVariant="cyber"
-                  rootClasses="community__item"
-                >
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faBook} />
-                  </NewIcon>
-                  <span>Modding Wiki</span>
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faArrowUpRight} />
-                  </NewIcon>
-                </NewLink>
-              ) : null}
-              {community.discord_url ? (
-                <NewLink
-                  primitiveType="link"
-                  href={community.discord_url}
-                  csVariant="cyber"
-                  rootClasses="community__item"
+        <Suspense fallback={<>Loading</>}>
+          <Await resolve={community} errorElement={<></>}>
+            {(resolvedValue) => {
+              return (
+                <PageHeader
+                  headingLevel="1"
+                  headingSize="3"
+                  variant="simple"
+                  icon={resolvedValue.community_icon_url}
+                  meta={
+                    <>
+                      {resolvedValue.wiki_url ? (
+                        <NewLink
+                          primitiveType="link"
+                          href={resolvedValue.wiki_url}
+                          csVariant="cyber"
+                          rootClasses="community__item"
+                        >
+                          <NewIcon csMode="inline" noWrapper>
+                            <FontAwesomeIcon icon={faBook} />
+                          </NewIcon>
+                          <span>Modding Wiki</span>
+                          <NewIcon csMode="inline" noWrapper>
+                            <FontAwesomeIcon icon={faArrowUpRight} />
+                          </NewIcon>
+                        </NewLink>
+                      ) : null}
+                      {resolvedValue.discord_url ? (
+                        <NewLink
+                          primitiveType="link"
+                          href={resolvedValue.discord_url}
+                          csVariant="cyber"
+                          rootClasses="community__item"
+                        >
+                          <NewIcon csMode="inline" noWrapper>
+                            <FontAwesomeIcon icon={faDiscord} />
+                          </NewIcon>
+                          <span>Modding Discord</span>
+                          <NewIcon csMode="inline" noWrapper>
+                            <FontAwesomeIcon icon={faArrowUpRight} />
+                          </NewIcon>
+                        </NewLink>
+                      ) : null}
+                    </>
+                  }
                 >
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faDiscord} />
-                  </NewIcon>
-                  <span>Modding Discord</span>
-                  <NewIcon csMode="inline" noWrapper>
-                    <FontAwesomeIcon icon={faArrowUpRight} />
-                  </NewIcon>
-                </NewLink>
-              ) : null}
-            </>
-          }
-        >
-          {community.name}
-        </PageHeader>
+                  {resolvedValue.name}
+                </PageHeader>
+              );
+            }}
+          </Await>
+        </Suspense>
+
         <PackageSearch
           listings={listings}
           packageCategories={filters.package_categories}
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
index f4030cd1d..b3122dbe4 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -6,7 +6,7 @@ import {
   PackageListings,
   Section,
 } from "@thunderstore/dapper/types";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import "./PackageSearch.css";
@@ -18,11 +18,7 @@ import {
   NewPagination,
   NewTextInput,
 } from "@thunderstore/cyberstorm";
-import {
-  useNavigation,
-  useNavigationType,
-  useSearchParams,
-} from "react-router";
+import { Await, useNavigationType, useSearchParams } from "react-router";
 import { PackageCount } from "./components/PackageCount/PackageCount";
 import {
   isPackageOrderOptions,
@@ -34,7 +30,7 @@ import { RadioGroup } from "../RadioGroup/RadioGroup";
 import { CategoryTagCloud } from "./components/CategoryTagCloud/CategoryTagCloud";
 import { CollapsibleMenu } from "../Collapsible/Collapsible";
 import { CheckboxList } from "../CheckboxList/CheckboxList";
-import { StalenessIndicator } from "../StalenessIndicator/StalenessIndicator";
+// import { StalenessIndicator } from "../StalenessIndicator/StalenessIndicator";
 import { PackageLikeAction } from "@thunderstore/cyberstorm-forms";
 import { RequestConfig } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
@@ -42,7 +38,7 @@ import { DapperTs } from "@thunderstore/dapper-ts";
 const PER_PAGE = 20;
 
 interface Props {
-  listings: PackageListings;
+  listings: Promise<PackageListings>;
   packageCategories: PackageCategory[];
   sections: Section[];
   config: () => RequestConfig;
@@ -154,8 +150,6 @@ export function PackageSearch(props: Props) {
     dapper,
   } = props;
 
-  const navigation = useNavigation();
-
   const navigationType = useNavigationType();
 
   const [searchParams, setSearchParams] = useSearchParams();
@@ -589,12 +583,20 @@ export function PackageSearch(props: Props) {
           />
           <div className="package-search__tools">
             <div className="package-search__results">
-              <PackageCount
-                page={currentPage}
-                pageSize={PER_PAGE}
-                searchQuery={searchParamsBlob.search}
-                totalCount={listings.count}
-              />
+              <Suspense fallback={<>Loading...</>}>
+                <Await resolve={listings} errorElement={<></>}>
+                  {(resolvedValue) => {
+                    return (
+                      <PackageCount
+                        page={currentPage}
+                        pageSize={PER_PAGE}
+                        searchQuery={searchParamsBlob.search}
+                        totalCount={resolvedValue.count}
+                      />
+                    );
+                  }}
+                </Await>
+              </Suspense>
             </div>
             <div className="package-search__listing-actions">
               {/* <div className="__display"></div> */}
@@ -607,72 +609,93 @@ export function PackageSearch(props: Props) {
             </div>
           </div>
         </div>
-        <StalenessIndicator
-          isStale={navigation.state === "loading" ? true : false}
-          rootClasses="package-search__packages"
-        >
-          {listings.results.length > 0 ? (
-            <div className="package-search__grid">
-              {listings.results.map((p) => (
-                <CardPackage
-                  key={`${p.namespace}-${p.name}`}
-                  packageData={p}
-                  isLiked={ratedPackages.includes(`${p.namespace}-${p.name}`)}
-                  packageLikeAction={() => {
-                    if (likeAction) {
-                      likeAction(
-                        ratedPackages.includes(`${p.namespace}-${p.name}`),
-                        p.namespace,
-                        p.name,
-                        Boolean(currentUser?.username)
-                      );
-                    }
-                  }}
-                />
-              ))}
-            </div>
-          ) : (searchParamsBlob.order !== undefined && searchParams.size > 1) ||
-            (searchParamsBlob.order === undefined && searchParams.size > 0) ? (
-            <EmptyState.Root className="no-result">
-              <EmptyState.Icon wrapperClasses="no-result__ghostbounce">
-                <FontAwesomeIcon icon={faSearch} />
-              </EmptyState.Icon>
-              <div className="no-result__info">
-                <EmptyState.Title>No results found</EmptyState.Title>
-                <EmptyState.Message>
-                  Make sure all keywords are spelled correctly or try different
-                  search parameters.
-                </EmptyState.Message>
-              </div>
-              <NewButton
-                onClick={() => resetParams(searchParamsBlob.order)}
-                rootClasses="no-result__button"
-              >
-                Clear all filters
-              </NewButton>
-            </EmptyState.Root>
-          ) : (
-            <EmptyState.Root className="no-result">
-              <EmptyState.Icon wrapperClasses="no-result__ghostbounce">
-                <FontAwesomeIcon icon={faGhost} />
-              </EmptyState.Icon>
-              <div className="no-result__info">
-                <EmptyState.Title>It&apos;s empty in here</EmptyState.Title>
-                <EmptyState.Message>
-                  Be the first to upload a mod!
-                </EmptyState.Message>
-              </div>
-            </EmptyState.Root>
-          )}
-        </StalenessIndicator>
+        <Suspense fallback={<>Loading...</>}>
+          <Await resolve={listings} errorElement={<></>}>
+            {(resolvedValue) => {
+              return (
+                <div className="package-search__packages">
+                  {resolvedValue.results.length > 0 ? (
+                    <div className="package-search__grid">
+                      {resolvedValue.results.map((p) => (
+                        <CardPackage
+                          key={`${p.namespace}-${p.name}`}
+                          packageData={p}
+                          isLiked={ratedPackages.includes(
+                            `${p.namespace}-${p.name}`
+                          )}
+                          packageLikeAction={() => {
+                            if (likeAction) {
+                              likeAction(
+                                ratedPackages.includes(
+                                  `${p.namespace}-${p.name}`
+                                ),
+                                p.namespace,
+                                p.name,
+                                Boolean(currentUser?.username)
+                              );
+                            }
+                          }}
+                        />
+                      ))}
+                    </div>
+                  ) : (searchParamsBlob.order !== undefined &&
+                      searchParams.size > 1) ||
+                    (searchParamsBlob.order === undefined &&
+                      searchParams.size > 0) ? (
+                    <EmptyState.Root className="no-result">
+                      <EmptyState.Icon wrapperClasses="no-result__ghostbounce">
+                        <FontAwesomeIcon icon={faSearch} />
+                      </EmptyState.Icon>
+                      <div className="no-result__info">
+                        <EmptyState.Title>No results found</EmptyState.Title>
+                        <EmptyState.Message>
+                          Make sure all keywords are spelled correctly or try
+                          different search parameters.
+                        </EmptyState.Message>
+                      </div>
+                      <NewButton
+                        onClick={() => resetParams(searchParamsBlob.order)}
+                        rootClasses="no-result__button"
+                      >
+                        Clear all filters
+                      </NewButton>
+                    </EmptyState.Root>
+                  ) : (
+                    <EmptyState.Root className="no-result">
+                      <EmptyState.Icon wrapperClasses="no-result__ghostbounce">
+                        <FontAwesomeIcon icon={faGhost} />
+                      </EmptyState.Icon>
+                      <div className="no-result__info">
+                        <EmptyState.Title>
+                          It&apos;s empty in here
+                        </EmptyState.Title>
+                        <EmptyState.Message>
+                          Be the first to upload a mod!
+                        </EmptyState.Message>
+                      </div>
+                    </EmptyState.Root>
+                  )}
+                </div>
+              );
+            }}
+          </Await>
+        </Suspense>
         <div className="package-search__pagination">
-          <NewPagination
-            currentPage={currentPage}
-            onPageChange={setPage}
-            pageSize={PER_PAGE}
-            siblingCount={4}
-            totalCount={listings.count}
-          />
+          <Suspense fallback={<>Loading...</>}>
+            <Await resolve={listings} errorElement={<></>}>
+              {(resolvedValue) => {
+                return (
+                  <NewPagination
+                    currentPage={currentPage}
+                    onPageChange={setPage}
+                    pageSize={PER_PAGE}
+                    siblingCount={4}
+                    totalCount={resolvedValue.count}
+                  />
+                );
+              }}
+            </Await>
+          </Suspense>
         </div>
       </div>
     </div>
diff --git a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css
index 1836b0db0..0354737f7 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css
+++ b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css
@@ -1,7 +1,6 @@
 @layer nimbus-components {
   .page-header {
     display: flex;
-    flex: 1 1 0;
     flex-direction: row;
     gap: var(--space-32);
     align-items: flex-start;
diff --git a/apps/cyberstorm-remix/app/root.tsx b/apps/cyberstorm-remix/app/root.tsx
index fe5535591..cde2bb418 100644
--- a/apps/cyberstorm-remix/app/root.tsx
+++ b/apps/cyberstorm-remix/app/root.tsx
@@ -12,7 +12,7 @@ import {
   useLoaderData,
   useLocation,
   useRouteError,
-  useRouteLoaderData,
+  // useRouteLoaderData,
 } from "react-router";
 // import { LinksFunction } from "@remix-run/react/dist/routeModules";
 import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
@@ -269,7 +269,7 @@ const TooltipProvider = memo(function TooltipProvider({
 });
 
 function App() {
-  const data = useRouteLoaderData<RootLoadersType>("root");
+  const data = useLoaderData<RootLoadersType>();
   const dapper = new DapperTs(() => {
     return {
       apiHost: data?.publicEnvVariables.ENV.VITE_API_URL,