Merge pull request #2509 from pyth-network/cprussin/ui-50-fix-loading-jankiness

wip: add nextjs loading state

Author: cprussin

apps/insights/next.config.js

@@ -3,6 +3,10 @@ const config = {
 
   pageExtensions: ["ts", "tsx", "mdx"],
 
+  experimental: {
+    useCache: true,
+  },
+
   logging: {
     fetches: {
       fullUrl: true,

apps/insights/src/app/layout.ts

@@ -1,5 +1,2 @@
 export { Root as default } from "../components/Root";
 export { metadata, viewport } from "../metadata";
-
-export const dynamic = "error";
-export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts

@@ -0,0 +1 @@
+export { ChartPageLoading as default } from "../../../../components/PriceFeed/chart-page";

apps/insights/src/app/price-feeds/[slug]/(main)/page.ts

@@ -0,0 +1,3 @@
+export { ChartPage as default } from "../../../../components/PriceFeed/chart-page";
+
+export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/@feedCountBadge/default.ts

@@ -0,0 +1 @@
+export { FeedCountBadge as default } from "../../../../components/PriceFeed/feed-count-badge";

apps/insights/src/app/price-feeds/[slug]/@header/default.ts

@@ -0,0 +1 @@
+export { PriceFeedHeader as default } from "../../../../components/PriceFeed/header";

apps/insights/src/app/price-feeds/[slug]/layout.ts

@@ -1,11 +1,14 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import type { ReactNode } from "react";
 
 import { Cluster, getFeeds } from "../../../services/pyth";
 
 export { PriceFeedLayout as default } from "../../../components/PriceFeed/layout";
 
 type Props = {
+  feedCountBadge: ReactNode;
+  header: ReactNode;
   params: Promise<{
     slug: string;
   }>;
@@ -29,5 +32,4 @@ export const generateMetadata = async ({
     : notFound();
 };
 
-export const dynamic = "error";
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/page.ts

@@ -0,0 +1 @@
+export { PublishersLoading as default } from "../../../../components/PriceFeed/publishers";

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

@@ -1,4 +1,3 @@
 export { Publishers as default } from "../../../../components/PriceFeed/publishers";
 
-export const dynamic = "error";
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/publishers/page.tsx

@@ -1,4 +1,13 @@
+import type { Metadata } from "next";
+
 export { PriceFeeds as default } from "../../components/PriceFeeds";
 
-export const dynamic = "error";
 export const revalidate = 3600;
+
+export const metadata: Metadata = {
+  title: {
+    default: "Price Feeds",
+    template: "%s | Price Feeds | Pyth Network Insights",
+  },
+  description: "Explore market data on the Pyth network.",
+};

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

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

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

@@ -0,0 +1,3 @@
+export { Performance as default } from "../../../../../components/Publisher/performance";
+
+export const revalidate = 3600;

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

@@ -1,7 +1,7 @@
 import { lookup } from "@pythnetwork/known-publishers";
 import type { Metadata } from "next";
 
-export { PublishersLayout as default } from "../../../../components/Publisher/layout";
+export { PublisherLayout as default } from "../../../../components/Publisher/layout";
 
 type Props = {
   params: Promise<{
@@ -22,5 +22,4 @@ export const generateMetadata = async ({
   };
 };
 
-export const dynamic = "error";
 export const revalidate = 3600;

apps/insights/src/app/publishers/[cluster]/[key]/(performance)/page.ts

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

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

@@ -1,4 +1,3 @@
 export { PriceFeeds as default } from "../../../../../components/Publisher/price-feeds";
 
-export const dynamic = "error";
 export const revalidate = 3600;

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

@@ -1,4 +1,12 @@
+import type { Metadata } from "next";
 export { Publishers as default } from "../../components/Publishers";
 
-export const dynamic = "error";
 export const revalidate = 3600;
+
+export const metadata: Metadata = {
+  title: {
+    default: "Publishers",
+    template: "%s | Publishers | Pyth Network Insights",
+  },
+  description: "Explore publishers who contribute to the Pyth network.",
+};

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

@@ -0,0 +1,12 @@
+import { Badge } from "@pythnetwork/component-library/Badge";
+import type { ComponentProps } from "react";
+
+type Props = Omit<ComponentProps<typeof Badge>, "children"> & {
+  children: string;
+};
+
+export const AssetClassBadge = ({ children, ...props }: Props) => (
+  <Badge variant="neutral" style="outline" size="xs" {...props}>
+    {children.toUpperCase()}
+  </Badge>
+);

apps/insights/src/app/publishers/[cluster]/[key]/price-feeds/page.ts

@@ -55,7 +55,7 @@ export const EntityList = <T extends string>({
     {...props}
   >
     {isLoading ? (
-      <GridListItem className={styles.entityItem ?? ""}>
+      <GridListItem className={styles.entityItem ?? ""} textValue="Loading">
         <div className={styles.itemHeader}>{headerLoadingSkeleton}</div>
         <dl className={styles.itemDetails}>
           {fields.map((field) => (

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

@@ -1,6 +1,5 @@
 import { Info } from "@phosphor-icons/react/dist/ssr/Info";
 import { Lightbulb } from "@phosphor-icons/react/dist/ssr/Lightbulb";
-import { Alert, AlertTrigger } from "@pythnetwork/component-library/Alert";
 import { Button } from "@pythnetwork/component-library/Button";
 import type { ComponentProps, ReactNode } from "react";
 
@@ -14,24 +13,21 @@ type Props = {
 
 export const Explain = ({ size, title, children }: Props) => (
   <div className={styles.explain}>
-    <AlertTrigger>
-      <Button
-        className={styles.trigger ?? ""}
-        variant="ghost"
-        size={size}
-        beforeIcon={(props) => <Info weight="fill" {...props} />}
-        rounded
-        hideText
-      >
-        Explain {title}
-      </Button>
-      <Alert
-        title={title}
-        icon={<Lightbulb />}
-        bodyClassName={styles.description}
-      >
-        {children}
-      </Alert>
-    </AlertTrigger>
+    <Button
+      className={styles.trigger ?? ""}
+      variant="ghost"
+      size={size}
+      beforeIcon={(props) => <Info weight="fill" {...props} />}
+      rounded
+      hideText
+      alert={{
+        title,
+        icon: <Lightbulb />,
+        bodyClassName: styles.description,
+        contents: children,
+      }}
+    >
+      Explain {title}
+    </Button>
   </div>
 );