fix(web): remove navigation items component loading skeleton

.changeset/great-baboons-learn.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Removed skeleton display from navigation items component if the env vars are not set

apps/web/src/components/NavigationMenus.tsx

@@ -8,30 +8,22 @@ import {
   Transition,
 } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import Skeleton from "react-loading-skeleton";
 
 import { useHover } from "~/hooks/useHover";
 import { useEnv } from "~/providers/Env";
-import type { ExpandibleNavigationItem, NavigationItem } from "./content";
-import { getNavigationItems, isExpandibleNavigationItem } from "./content";
+import type { ExpandibleNavigationItem, NavigationItem } from "../content";
+import { getNavigationItems, isExpandibleNavigationItem } from "../content";
 
 export const NavigationMenus: FC = () => {
   const { env } = useEnv();
-
-  const navigationItems = useMemo(() => {
-    const networkName = env ? env.PUBLIC_NETWORK_NAME : undefined;
-    const publicSupportedNetworks = env
-      ? env.PUBLIC_SUPPORTED_NETWORKS
-      : undefined;
-
-    return networkName && publicSupportedNetworks
-      ? getNavigationItems(networkName, publicSupportedNetworks)
-      : undefined;
-  }, [env]);
-
-  if (!navigationItems) {
-    return <Skeleton width={20} />;
-  }
+  const navigationItems = useMemo(
+    () =>
+      getNavigationItems({
+        networkName: env?.PUBLIC_NETWORK_NAME,
+        publicSupportedNetworks: env?.PUBLIC_SUPPORTED_NETWORKS,
+      }),
+    [env]
+  );
 
   return (
     <div className="items-center gap-4 xl:flex">

apps/web/src/components/SidebarNavigationMenu.tsx

@@ -4,37 +4,33 @@ import { usePathname } from "next/navigation";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { Bars3Icon } from "@heroicons/react/24/solid";
 import cn from "classnames";
-import Skeleton from "react-loading-skeleton";
 
 import { useEnv } from "~/providers/Env";
+import type { ExpandibleNavigationItem, NavigationItem } from "../content";
+import { isExpandibleNavigationItem, getNavigationItems } from "../content";
 import { BlobscanLogo } from "./BlobscanLogo";
 import { Collapsable } from "./Collapsable";
 import { IconButton } from "./IconButton";
 import { Rotable } from "./Rotable";
 import { SidePanel, useSidePanel } from "./SidePanel";
 import { ThemeModeButton } from "./ThemeModeButton";
-import type { ExpandibleNavigationItem, NavigationItem } from "./content";
-import { isExpandibleNavigationItem, getNavigationItems } from "./content";
 
 export function SidebarNavigationMenu({ className }: { className?: string }) {
+  const { env } = useEnv();
   const [open, setOpen] = useState(false);
+  const navigationItems = useMemo(
+    () =>
+      getNavigationItems({
+        networkName: env?.PUBLIC_NETWORK_NAME,
+        publicSupportedNetworks: env?.PUBLIC_SUPPORTED_NETWORKS,
+      }),
+    [env]
+  );
 
   const openSidebar = useCallback(() => setOpen(true), []);
 
   const closeSidebar = useCallback(() => setOpen(false), []);
 
-  const { env } = useEnv();
-
-  const navigationItems = useMemo(() => {
-    const networkName = env ? env.PUBLIC_NETWORK_NAME : undefined;
-    const publicSupportedNetworks = env
-      ? env.PUBLIC_SUPPORTED_NETWORKS
-      : undefined;
-    return networkName && publicSupportedNetworks
-      ? getNavigationItems(networkName, publicSupportedNetworks)
-      : undefined;
-  }, [env]);
-
   return (
     <div className={className}>
       <IconButton onClick={openSidebar}>
@@ -44,24 +40,20 @@ export function SidebarNavigationMenu({ className }: { className?: string }) {
         <div className="p-4 pb-16">
           <BlobscanLogo className="mb-8 mt-4 w-40" />
           <div className="flex flex-col justify-center gap-2 opacity-80">
-            {navigationItems ? (
-              navigationItems.map((item, i) =>
-                isExpandibleNavigationItem(item) ? (
-                  <ExpandableNavigationLinks
-                    key={`${item.label}-${i}`}
-                    {...item}
-                    onClick={closeSidebar}
-                  />
-                ) : (
-                  <NavigationLink
-                    key={`${item.label}-${i}`}
-                    {...item}
-                    onClick={closeSidebar}
-                  />
-                )
+            {navigationItems.map((item, i) =>
+              isExpandibleNavigationItem(item) ? (
+                <ExpandableNavigationLinks
+                  key={`${item.label}-${i}`}
+                  {...item}
+                  onClick={closeSidebar}
+                />
+              ) : (
+                <NavigationLink
+                  key={`${item.label}-${i}`}
+                  {...item}
+                  onClick={closeSidebar}
+                />
               )
-            ) : (
-              <Skeleton width={24} height={34} />
             )}
           </div>
         </div>

apps/web/src/components/content.tsx → apps/web/src/content.tsx

@@ -58,10 +58,13 @@ export function isExpandibleNavigationItem(
   return typeof item === "object" && item !== null && "items" in item;
 }
 
-export const getNavigationItems = (
-  networkName: string,
-  publicSupportedNetworks: string
-): Array<NavigationItem | ExpandibleNavigationItem> => {
+export const getNavigationItems = ({
+  networkName,
+  publicSupportedNetworks,
+}: {
+  networkName?: string;
+  publicSupportedNetworks?: ExpandibleNavigationSubItem[];
+}): Array<NavigationItem | ExpandibleNavigationItem> => {
   return [
     {
       label: "Blockchain",
@@ -84,7 +87,7 @@ export const getNavigationItems = (
     {
       label: "Networks",
       icon: <EthereumIcon />,
-      items: JSON.parse(publicSupportedNetworks || "[]"),
+      items: publicSupportedNetworks ?? [],
     },
     {
       label: "Stats",
@@ -94,7 +97,7 @@ export const getNavigationItems = (
     {
       label: "API",
       icon: <CommandLineIcon />,
-      href: resolveApiUrl(networkName),
+      href: networkName ? resolveApiUrl(networkName) : "#",
     },
     {
       label: "Docs",

apps/web/src/env.mjs

@@ -17,6 +17,11 @@ const booleanSchema = z
   .refine((s) => s === "true" || s === "false")
   .transform((s) => s === "true");
 
+const publicSupportedNetwork = z.object({
+  label: z.string(),
+  href: z.string().url(),
+});
+
 const clientEnvVars = {
   PUBLIC_BEACON_BASE_URL: z.string().url().default("https://beaconcha.in"),
   PUBLIC_EXPLORER_BASE_URL: z.string().url().default("https://etherscan.io"),
@@ -28,7 +33,19 @@ const clientEnvVars = {
     .string()
     .default(
       '[{"label":"Ethereum Mainnet","href":"https://blobscan.com/"},{"label":"Gnosis","href":"https://gnosis.blobscan.com/"},{"label":"Holesky Testnet","href":"https://holesky.blobscan.com/"},{"label":"Sepolia Testnet","href":"https://sepolia.blobscan.com/"}]'
-    ),
+    )
+    .transform((value) => JSON.parse(value))
+    .transform((value) => {
+      const res = z.array(publicSupportedNetwork).safeParse(value);
+
+      if (!res.success) {
+        throw new Error(`Failed to parse PUBLIC_SUPPORTED_NETWORKS`, {
+          cause: res.error,
+        });
+      }
+
+      return res.data;
+    }),
   PUBLIC_VERCEL_ANALYTICS_ENABLED: booleanSchema.default("false"),
 };
 

apps/web/src/pages/block/[id].tsx

@@ -13,8 +13,8 @@ import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { Link } from "~/components/Link";
 import { NavArrows } from "~/components/NavArrows";
 import { BlockStatus } from "~/components/Status";
-import { getFirstBlobNumber } from "~/components/content";
 import { api } from "~/api-client";
+import { getFirstBlobNumber } from "~/content";
 import NextError from "~/pages/_error";
 import { useEnv } from "~/providers/Env";
 import type { BlockWithExpandedBlobsAndTransactions } from "~/types";