wip: add nextjs loading state

Author: cprussin

apps/insights/src/app/price-feeds/layout.ts

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
+import type { ReactNode } from "react";
 
-export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
+const Layout = ({ children }: { children: ReactNode }) => children;
+export default Layout;
+// export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
 
 export const metadata: Metadata = {
   title: {

apps/insights/src/app/publishers/[cluster]/[key]/loading.ts

@@ -0,0 +1 @@
+export { PerformanceLoading as default } from "../../../../components/Publisher/performance";

apps/insights/src/app/publishers/[cluster]/[key]/price-feeds/loading.tsx

@@ -0,0 +1 @@
+export { PriceFeedsLoading as default } from "../../../../../components/Publisher/price-feeds-loading";

apps/insights/src/app/publishers/layout.ts

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
+import type { ReactNode } from "react";
 
-export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
+const Layout = ({ children }: { children: ReactNode }) => children;
+export default Layout;
+// export { ZoomLayoutTransition as default } from "../../components/ZoomLayoutTransition";
 
 export const metadata: Metadata = {
   title: {

apps/insights/src/components/PriceComponentsCard/index.tsx

@@ -347,11 +347,9 @@ export const PriceComponentsCardContents = <
       title={
         <>
           <span>{label}</span>
-          {!props.isLoading && (
-            <Badge style="filled" variant="neutral" size="md">
-              {props.numResults}
-            </Badge>
-          )}
+          <Badge style="filled" variant="neutral" size="md">
+            {!props.isLoading && props.numResults}
+          </Badge>
         </>
       }
       toolbar={

apps/insights/src/components/PriceFeedTag/index.tsx

@@ -65,7 +65,7 @@ const PriceFeedTagImpl = ({ className, compact, ...props }: ImplProps) => {
       className={clsx(styles.priceFeedTag, className)}
       data-compact={compact ? "" : undefined}
       data-loading={props.isLoading ? "" : undefined}
-      {...omitKeys(props, ["feedName", "icon", "description"])}
+      {...omitKeys(props, ["feedName", "icon", "description", "isLoading"])}
     >
       {props.isLoading ? (
         <Skeleton fill className={styles.icon} />

apps/insights/src/components/Publisher/performance.tsx

@@ -8,7 +8,7 @@ import { Link } from "@pythnetwork/component-library/Link";
 import { Table } from "@pythnetwork/component-library/Table";
 import { lookup } from "@pythnetwork/known-publishers";
 import { notFound } from "next/navigation";
-import type { ReactNode } from "react";
+import type { ReactNode, ComponentProps } from "react";
 
 import { getPriceFeeds } from "./get-price-feeds";
 import styles from "./performance.module.scss";
@@ -119,101 +119,154 @@ export const Performance = async ({ params }: Props) => {
   return rows === undefined ? (
     notFound()
   ) : (
-    <div className={styles.performance}>
-      <Card
-        icon={<Broadcast />}
-        title="Publishers Ranking"
-        className={styles.publishersRankingCard ?? ""}
-      >
-        <EntityList
-          label="Publishers Ranking"
-          className={styles.publishersRankingList ?? ""}
-          fields={[
-            { id: "ranking", name: "Ranking" },
-            { id: "averageScore", name: "Average Score" },
-            { id: "activeFeeds", name: "Active Feeds" },
-            { id: "inactiveFeeds", name: "Inactive Feeds" },
-          ]}
-          rows={rows.map((row) => ({
-            ...row,
-            textValue: row.nameAsString,
-            header: row.data.name,
-          }))}
-        />
-        <Table
-          rounded
-          fill
-          className={styles.publishersRankingTable ?? ""}
-          label="Publishers Ranking"
-          columns={[
-            {
-              id: "ranking",
-              name: "RANKING",
-              width: 25,
-            },
-            {
-              id: "name",
-              name: "NAME / ID",
-              isRowHeader: true,
-              alignment: "left",
-            },
-            {
-              id: "activeFeeds",
-              name: (
-                <>
-                  ACTIVE FEEDS
-                  <ExplainActive />
-                </>
-              ),
-              alignment: "center",
-              width: 30,
-            },
-            {
-              id: "inactiveFeeds",
-              name: (
-                <>
-                  INACTIVE FEEDS
-                  <ExplainInactive />
-                </>
-              ),
-              alignment: "center",
-              width: 30,
-            },
-            {
-              id: "averageScore",
-              name: (
-                <>
-                  AVERAGE SCORE
-                  <ExplainAverage scoreTime={publishers[0]?.scoreTime} />
-                </>
-              ),
-              alignment: "right",
-              width: PUBLISHER_SCORE_WIDTH,
-            },
-          ]}
-          rows={rows}
-        />
-      </Card>
-      <TopFeedsCard
-        title="High-Performing"
-        emptyIcon={<SmileySad />}
-        emptyHeader="Oh no!"
-        emptyBody="This publisher has no high performing feeds"
-        emptyVariant="error"
-        feeds={highPerformingFeeds}
-      />
-      <TopFeedsCard
-        title="Low-Performing"
-        emptyIcon={<Confetti />}
-        emptyHeader="Looking good!"
-        emptyBody="This publisher has no low performing feeds"
-        emptyVariant="success"
-        feeds={lowPerformingFeeds}
-      />
-    </div>
+    <PerformanceImpl
+      publishers={rows}
+      highPerformingFeeds={highPerformingFeeds}
+      lowPerformingFeeds={lowPerformingFeeds}
+      averageScoreTime={publishers[0]?.scoreTime}
+    />
   );
 };
 
+export const PerformanceLoading = () => <PerformanceImpl isLoading />;
+
+type PerformanceImplProps =
+  | { isLoading: true }
+  | {
+      isLoading?: false;
+      publishers: (NonNullable<
+        ComponentProps<
+          typeof Table<
+            | "ranking"
+            | "averageScore"
+            | "activeFeeds"
+            | "inactiveFeeds"
+            | "name"
+          >
+        >["rows"]
+      >[number] & {
+        nameAsString: string;
+      })[];
+      highPerformingFeeds: ReturnType<typeof getFeedRows>;
+      lowPerformingFeeds: ReturnType<typeof getFeedRows>;
+      averageScoreTime?: Date | undefined;
+    };
+
+const PerformanceImpl = (props: PerformanceImplProps) => (
+  <div className={styles.performance}>
+    <Card
+      icon={<Broadcast />}
+      title="Publishers Ranking"
+      className={styles.publishersRankingCard ?? ""}
+    >
+      <EntityList
+        label="Publishers Ranking"
+        className={styles.publishersRankingList ?? ""}
+        fields={[
+          { id: "ranking", name: "Ranking" },
+          { id: "averageScore", name: "Average Score" },
+          { id: "activeFeeds", name: "Active Feeds" },
+          { id: "inactiveFeeds", name: "Inactive Feeds" },
+        ]}
+        {...(props.isLoading
+          ? { isLoading: true }
+          : {
+              rows: props.publishers.map((publisher) => ({
+                ...publisher,
+                textValue: publisher.nameAsString,
+                header: publisher.data.name,
+              })),
+            })}
+      />
+      <Table
+        rounded
+        fill
+        className={styles.publishersRankingTable ?? ""}
+        label="Publishers Ranking"
+        columns={[
+          {
+            id: "ranking",
+            name: "RANKING",
+            width: 25,
+          },
+          {
+            id: "name",
+            name: "NAME / ID",
+            isRowHeader: true,
+            alignment: "left",
+          },
+          {
+            id: "activeFeeds",
+            name: (
+              <>
+                ACTIVE FEEDS
+                <ExplainActive />
+              </>
+            ),
+            alignment: "center",
+            width: 30,
+          },
+          {
+            id: "inactiveFeeds",
+            name: (
+              <>
+                INACTIVE FEEDS
+                <ExplainInactive />
+              </>
+            ),
+            alignment: "center",
+            width: 30,
+          },
+          {
+            id: "averageScore",
+            name: (
+              <>
+                AVERAGE SCORE
+                <ExplainAverage
+                  {...(!props.isLoading && {
+                    scoreTime: props.averageScoreTime,
+                  })}
+                />
+              </>
+            ),
+            alignment: "right",
+            width: PUBLISHER_SCORE_WIDTH,
+          },
+        ]}
+        {...(props.isLoading
+          ? { isLoading: true }
+          : {
+              rows: props.publishers,
+            })}
+      />
+    </Card>
+    <TopFeedsCard
+      title="High-Performing"
+      emptyIcon={<SmileySad />}
+      emptyHeader="Oh no!"
+      emptyBody="This publisher has no high performing feeds"
+      emptyVariant="error"
+      {...(props.isLoading
+        ? { isLoading: true }
+        : {
+            feeds: props.highPerformingFeeds,
+          })}
+    />
+    <TopFeedsCard
+      title="Low-Performing"
+      emptyIcon={<Confetti />}
+      emptyHeader="Looking good!"
+      emptyBody="This publisher has no low performing feeds"
+      emptyVariant="success"
+      {...(props.isLoading
+        ? { isLoading: true }
+        : {
+            feeds: props.lowPerformingFeeds,
+          })}
+    />
+  </div>
+);
+
 const getFeedRows = (
   priceFeeds: (Omit<
     Awaited<ReturnType<typeof getPriceFeeds>>,
@@ -271,31 +324,33 @@ type TopFeedsCardProps = {
   emptyHeader: string;
   emptyBody: string;
   emptyVariant: NoResultsVariant;
-  feeds: ReturnType<typeof getFeedRows>;
-};
+} & (
+  | { isLoading: true }
+  | { isLoading?: false | undefined; feeds: ReturnType<typeof getFeedRows> }
+);
 
 const TopFeedsCard = ({
   title,
   emptyIcon,
   emptyHeader,
   emptyBody,
   emptyVariant,
-  feeds,
+  ...props
 }: TopFeedsCardProps) => (
   <Card icon={<Network />} title={`${title} Feeds`}>
-    {feeds.length === 0 ? (
+    {props.isLoading || props.feeds.length > 0 ? (
+      <TopFeedsTable
+        label={`${title} Feeds`}
+        publisherScoreWidth={PUBLISHER_SCORE_WIDTH}
+        {...(props.isLoading ? { isLoading: true } : { rows: props.feeds })}
+      />
+    ) : (
       <NoResults
         icon={emptyIcon}
         header={emptyHeader}
         body={emptyBody}
         variant={emptyVariant}
       />
-    ) : (
-      <TopFeedsTable
-        label={`${title} Feeds`}
-        publisherScoreWidth={PUBLISHER_SCORE_WIDTH}
-        rows={feeds}
-      />
     )}
   </Card>
 );

apps/insights/src/components/Publisher/price-feeds-loading.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { PriceComponentsCardContents } from "../PriceComponentsCard";
+import { PriceFeedTag } from "../PriceFeedTag";
+
+export const PriceFeedsLoading = () => (
+  <PriceComponentsCardContents
+    label="Price Feeds"
+    searchPlaceholder="Feed symbol"
+    nameLoadingSkeleton={<PriceFeedTag compact isLoading />}
+    isLoading
+    extraColumns={[
+      {
+        id: "assetClass",
+        name: "ASSET CLASS",
+        alignment: "left",
+        allowsSorting: true,
+      },
+    ]}
+    nameWidth={90}
+  />
+);