Skip to content

Add suspense usage #1515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add suspense usage #1515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 132 additions & 101 deletions apps/cyberstorm-remix/app/c/community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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) {
Expand All @@ -81,15 +46,15 @@ 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
);
return {
community: community,
filters: filters,
Comment on lines 50 to 56
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Await community on the server loader to guarantee meta data.

Keep the UI using Suspense if desired, but resolve community on the server so the meta export has the data during SSR. Client loader can keep returning a Promise.

-    const community = dapper.getCommunity(params.communityId);
+    const community = await dapper.getCommunity(params.communityId);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const filters = await dapper.getCommunityFilters(params.communityId);
const sortedSections = filters.sections.sort(
(a, b) => b.priority - a.priority
);
return {
community: community,
filters: filters,
const community = await dapper.getCommunity(params.communityId);
const filters = await dapper.getCommunityFilters(params.communityId);
const sortedSections = filters.sections.sort(
(a, b) => b.priority - a.priority
);
return {
community: community,
filters: filters,
};
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/community.tsx around lines 50 to 56, the loader
returns a Promise for `community` which prevents `meta` from having
server-resolved data during SSR; change the loader to await the community fetch
before returning (i.e., await dapper.getCommunity(params.communityId) and assign
the resolved object to `community`) so the returned object contains concrete
community data for meta generation, while keeping the client-side code able to
return a Promise if desired.

listings: await dapper.getPackageListings(
listings: dapper.getPackageListings(
{
kind: "community",
communityId: params.communityId,
Expand Down Expand Up @@ -134,15 +99,15 @@ 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
);
return {
community: community,
filters: filters,
listings: await dapper.getPackageListings(
listings: dapper.getPackageListings(
{
kind: "community",
communityId: params.communityId,
Expand Down Expand Up @@ -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>
Comment on lines +146 to +184
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Meta tags implementation issue

The current implementation places meta tags inside Suspense/Await blocks within the component body, which is problematic for SEO and metadata functionality. Meta tags need to be in the document <head> to be properly recognized by search engines and social media platforms.

The original approach using the meta function was more appropriate for setting document metadata, as React Router handles placing these tags in the document head.

Consider reverting to the previous pattern:

export const meta: MetaFunction<typeof loader> = ({ data, location }) => {
  return [
    { title: `Thunderstore - The ${data?.community.name} Mod Database` },
    // other meta tags...
  ];
};

If you need to handle the asynchronous nature of the data, consider alternative approaches that ensure meta tags are properly placed in the document head while still supporting the suspense pattern.

Suggested change
<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>
export const meta: MetaFunction<typeof loader> = ({ data, location }) => {
if (!data?.community) {
return [];
}
const resolvedValue = data.community;
const siteUrl = getPublicEnvVariables(["VITE_SITE_URL"]).VITE_SITE_URL;
return [
{
title: `Thunderstore - The ${resolvedValue.name} Mod Database`
},
{
name: "description",
content: `Mods for ${resolvedValue.name}`
},
{ property: "og:type", content: "website" },
{
property: "og:url",
content: `${siteUrl}${location.pathname}`
},
{
property: "og:title",
content: `Thunderstore - The ${resolvedValue.name} Mod Database`
},
{
property: "og:description",
content: `Thunderstore is a mod database and API for downloading ${resolvedValue.name} mods`
},
{ property: "og:image:width", content: "360" },
{ property: "og:image:height", content: "480" },
{
property: "og:image",
content: resolvedValue.cover_image_url ?? undefined
},
{ property: "og:site_name", content: "Thunderstore" }
];
};

Spotted by Diamond

Fix in Graphite

Is this helpful? React 👍 or 👎 to let us know.


Comment on lines +146 to +185
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Meta tags rendered in the body won’t set document metadata. Reintroduce route meta.

Placing (and a “title” attribute) in the body is invalid and breaks SEO/sharing. Use a route meta export so in root can render these into .

-      <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>

Add a proper meta export (outside this hunk):

import type { MetaFunction } from "react-router";

export const meta: MetaFunction<typeof loader | typeof clientLoader> = ({
  data,
  location,
}) => {
  const site = getPublicEnvVariables(["VITE_SITE_URL"]).VITE_SITE_URL;
  const name =
    // supports server loader resolving the community or client loader promise
    (data as any)?.community?.name ?? undefined;
  return [
    {
      title: name
        ? `Thunderstore - The ${name} Mod Database`
        : "Thunderstore - The Mod Database",
    },
    {
      name: "description",
      content: name ? `Mods for ${name}` : "Thunderstore mod database",
    },
    { property: "og:type", content: "website" },
    { property: "og:url", content: `${site}${location.pathname}` },
    {
      property: "og:title",
      content: name ? `Thunderstore - The ${name} Mod Database` : "Thunderstore",
    },
    {
      property: "og:description",
      content: name
        ? `Thunderstore is a mod database and API for downloading ${name} mods`
        : "Thunderstore is a mod database and API",
    },
    { property: "og:site_name", content: "Thunderstore" },
  ];
};
🤖 Prompt for AI Agents 
In apps/cyberstorm-remix/app/c/community.tsx around lines 146–185, the component
is rendering <meta> tags inside the body which won’t set document head metadata;
remove these body meta tags and add a route-level export named meta (using the
MetaFunction type) outside this component file/hunk that builds and returns an
array of meta objects: derive site URL from
getPublicEnvVariables(["VITE_SITE_URL"]).VITE_SITE_URL, resolve the community
name from data (supporting server loader or client promise), and populate title,
description, og:type, og:url (using location.pathname), og:title,
og:description, and og:site_name accordingly so the app’s <Meta /> in root can
inject proper head tags for SEO/sharing.

<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
Expand All @@ -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}
Expand Down
Loading
Loading