[E] Replace processing message with empty message

app/[frontend]/(pages)/collections/[slug]/layout.tsx

@@ -39,9 +39,9 @@ export default async function CollectionTemplateLayout({
   return (
     <UpdateClientEnvironment records={records}>
       <SetCommunity data={community}>
+        {layouts.hero && <HeroTemplate data={layouts.hero} />}
         <ProcessingCheck data={layouts} entityType="collection">
           {slug && <ViewCounter slug={slug} />}
-          {layouts.hero && <HeroTemplate data={layouts.hero} />}
           <EntityNavBar data={collection} />
           {children}
         </ProcessingCheck>

app/[frontend]/(pages)/communities/[slug]/layout.tsx

@@ -41,10 +41,10 @@ export default async function CommunityLayout({
   return (
     <UpdateClientEnvironment records={records}>
       <SetCommunity data={community}>
+        {showNavBar && (
+          <CommunityNavBar data={community} entityData={community} />
+        )}
         <ProcessingCheck data={layouts} entityType="community">
-          {showNavBar && (
-            <CommunityNavBar data={community} entityData={community} />
-          )}
           {layouts.hero && <HeroTemplate data={layouts.hero} />}
           {children}
         </ProcessingCheck>

app/[frontend]/(pages)/items/[slug]/layout.tsx

@@ -46,12 +46,12 @@ export default async function ItemLayout({
   return (
     <UpdateClientEnvironment records={records}>
       <SetCommunity data={community}>
+        {hero && <HeroTemplate data={hero} />}
         <ProcessingCheck data={layouts} entityType="item">
           {googleScholarData && (
             <GoogleScholarMetaTags entity={googleScholarData} />
           )}
           {slug && <ViewCounter slug={slug} />}
-          {hero && <HeroTemplate data={hero} />}
           <EntityNavBar data={item} />
           <FullTextCheck data={layouts}>
             <NavigationTemplate data={navigation} />

components/templates/Detail/Full/Full.tsx

@@ -6,7 +6,7 @@ import Container from "@/components/layout/Container";
 import { FullDetailFragment$key } from "@/relay/FullDetailFragment.graphql";
 import { useSharedBlockFragment } from "@/components/templates/shared/shared.slots.graphql";
 import BlockSlotWrapper from "@/components/templates/mdx/BlockSlotWrapper";
-import { ProcessingMessage } from "@/components/templates/ProcessingCheck";
+import EmptyMessage from "@/components/templates/ProcessingCheck/EmptyMessage";
 import type { HeroBackground } from "@/types/graphql-schema";
 import TOC from "./TOC";
 import styles from "./Full.module.css";
@@ -41,7 +41,7 @@ export default function FullVariant({
           {body?.valid && !!body.content ? (
             <BlockSlotWrapper content={body.content} />
           ) : (
-            <ProcessingMessage entityType={entity?.__typename.toLowerCase()} />
+            <EmptyMessage entityType={entity?.__typename.toLowerCase()} />
           )}
         </div>
       ) : (
@@ -61,9 +61,7 @@ export default function FullVariant({
               </div>
             ) : (
               <div className={styles.noContent}>
-                <ProcessingMessage
-                  entityType={entity?.__typename.toLowerCase()}
-                />
+                <EmptyMessage entityType={entity?.__typename.toLowerCase()} />
               </div>
             )}
           </div>

components/templates/Detail/Summary/Summary.tsx

@@ -8,7 +8,6 @@ import Container from "@/components/layout/Container";
 import BlockSlotWrapper from "@/components/templates/mdx/BlockSlotWrapper";
 import InlineSlotWrapper from "@/components/templates/mdx/InlineSlotWrapper";
 import { SummaryDetailFragment$key } from "@/relay/SummaryDetailFragment.graphql";
-import { ProcessingMessage } from "@/components/templates/ProcessingCheck";
 import type { HeroBackground } from "@/types/graphql-schema";
 import Announcements from "./Announcements";
 import styles from "./Summary.module.css";
@@ -28,48 +27,40 @@ export default function Summary({
   const subheader = useSharedInlineFragment(slots?.subheader);
   const summary = useSharedBlockFragment(slots?.summary);
 
-  const showNoContent =
+  const hideTemplate =
     !detailDefinition?.showAnnouncements &&
     (!header || header?.empty) &&
     (!subheader || subheader?.empty) &&
     (!summary || summary?.empty);
 
   if (entity?.__typename === "%other") return null;
 
-  return (
+  return !hideTemplate ? (
     <Container width="wide" bgColor={bgColor}>
-      {showNoContent ? (
-        <div className={styles.noContent}>
-          <ProcessingMessage entityType={entity?.__typename.toLowerCase()} />
+      <div className={styles.grid}>
+        <div className={classNames("t-rte", styles.content)}>
+          {header?.valid && !!header.content && (
+            <h3>
+              <InlineSlotWrapper content={header.content} />
+            </h3>
+          )}
+          {subheader?.valid && !!subheader.content && (
+            <h4>
+              <InlineSlotWrapper content={subheader.content} />
+            </h4>
+          )}
+          {summary?.valid && !!summary.content && (
+            <BlockSlotWrapper content={summary.content} />
+          )}
         </div>
-      ) : (
-        <>
-          <div className={styles.grid}>
-            <div className={classNames("t-rte", styles.content)}>
-              {header?.valid && !!header.content && (
-                <h3>
-                  <InlineSlotWrapper content={header.content} />
-                </h3>
-              )}
-              {subheader?.valid && !!subheader.content && (
-                <h4>
-                  <InlineSlotWrapper content={subheader.content} />
-                </h4>
-              )}
-              {summary?.valid && !!summary.content && (
-                <BlockSlotWrapper content={summary.content} />
-              )}
-            </div>
-            {detailDefinition?.showAnnouncements && !!entity?.announcements && (
-              <div className={styles.announcements}>
-                <Announcements data={entity.announcements} />
-              </div>
-            )}
+        {detailDefinition?.showAnnouncements && !!entity?.announcements && (
+          <div className={styles.announcements}>
+            <Announcements data={entity.announcements} />
           </div>
-        </>
-      )}
+        )}
+      </div>
     </Container>
-  );
+  ) : null;
 }
 
 const fragment = graphql`

components/templates/MainLayout/MainLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { graphql, useFragment } from "react-relay";
-import { ProcessingMessage } from "@/components/templates/ProcessingCheck";
+import EmptyMessage from "@/components/templates/ProcessingCheck/EmptyMessage";
 import Container from "@/components/layout/Container";
 import TemplateFactory from "@/components/templates/Factory";
 import {
@@ -33,7 +33,7 @@ export default function MainLayout({
 
   return allHidden || !renderedTemplates ? (
     <Container className="my-5">
-      <ProcessingMessage entityType={entity?.__typename.toLowerCase()} />
+      <EmptyMessage entityType={entity?.__typename.toLowerCase()} />
     </Container>
   ) : (
     <div className={styles.grid}>

components/templates/Metadata/Metadata.tsx

@@ -11,7 +11,7 @@ import {
 import InlineSlotWrapper from "@/components/templates/mdx/InlineSlotWrapper";
 import BlockSlotWrapper from "@/components/templates/mdx/BlockSlotWrapper";
 import Container from "@/components/layout/Container";
-import { ProcessingMessage } from "@/components/templates/ProcessingCheck";
+import EmptyMessage from "@/components/templates/ProcessingCheck/EmptyMessage";
 import styles from "./Metadata.module.css";
 
 export default function MetadataTemplate({
@@ -57,7 +57,7 @@ export default function MetadataTemplate({
     </Container>
   ) : (
     <Container bgColor="NONE" className={styles.noContent} hideDivider>
-      <ProcessingMessage entityType="item" />
+      <EmptyMessage entityType="item" />
     </Container>
   );
 }

components/templates/ProcessingCheck/EmptyMessage.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Trans } from "react-i18next";
+import NoContent from "@/components/layout/messages/NoContent";
+
+export default function EmptyMessage({ entityType }: { entityType?: string }) {
+  const i18nKey =
+    entityType === "item" ? "messages.empty_item" : "messages.empty";
+  const noContentMessage = (
+    <div className="t-rte t-h4">
+      <Trans
+        i18nKey={i18nKey}
+        values={{ entity: entityType ?? "entity" }}
+        components={[
+          // eslint-disable-next-line jsx-a11y/heading-has-content
+          <h1 key="heading" className="t-h3 font-medium"></h1>,
+          <p key="p1" className="max-w-[850px]"></p>,
+          <p key="p2"></p>,
+        ]}
+      />
+    </div>
+  );
+
+  return <NoContent message={noContentMessage} />;
+}

components/templates/ProcessingCheck/ProcessingCheck.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren } from "react";
 import { graphql, useFragment } from "react-relay";
 import { ProcessingCheckFragment$key } from "@/relay/ProcessingCheckFragment.graphql";
 import Container from "@/components/layout/Container";
-import ProcessingMessage from "./ProcessingMessage";
+import EmptyMessage from "./EmptyMessage";
 import styles from "./ProcessingCheck.module.css";
 
 type Props = PropsWithChildren & {
@@ -19,7 +19,7 @@ export default function ProcessingCheck({ data, children, entityType }: Props) {
 
   return allHidden || !templates?.length ? (
     <Container className={styles.container}>
-      <ProcessingMessage entityType={entityType} />
+      <EmptyMessage entityType={entityType} />
     </Container>
   ) : (
     children

components/templates/ProcessingCheck/index.ts

@@ -1,3 +1,4 @@
 export { default } from "./ProcessingCheck";
 
 export { default as ProcessingMessage } from "./ProcessingMessage";
+export { default as EmptyMessage } from "./EmptyMessage";

components/templates/lists/items/Card/Card.module.css

@@ -159,7 +159,7 @@
     a:hover &,
     a:focus-visible & {
       transform: scale(101%);
-      transition: scale 170ms ease-in filter 170ms ease-in;
+      transition: transform 170ms ease-in, filter 170ms ease-in;
       filter: drop-shadow(1px 0px var(--border-color))
         drop-shadow(0px 1px var(--border-color))
         drop-shadow(0px -1px var(--border-color))

lib/locales/en.json

@@ -270,7 +270,9 @@
       "error": "An error occured.",
       "content": "There was an error rendering this content.",
       "admin_content": "There was an error rendering this content: {{error}}",
-      "processing": "<0>Content Currently Being Processed</0><1>This {{entity}} was recently updated and is being processed before it can be displayed. Please check back in a few minutes.</1><2>If this message persists, please contact support for assistance.</2>"
+      "processing": "<0>Content Currently Being Processed</0><1>This {{entity}} was recently updated and is being processed before it can be displayed. Please check back in a few minutes.</1><2>If this message persists, please contact support for assistance.</2>",
+      "empty": "<0>This {{entity}} is empty.</0><1>Please check back soon for updates.</1><2>If this message persists, please contact support for assistance.</2>",
+      "empty_item": "<0>This {{entity}} has no content.</0><1>Please check back soon for updates.</1><2>If this message persists, please contact support for assistance.</2>"
     },
     "analytics": {
       "regions": {