unkeyed · chronark · Apr 7, 2025 · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
@@ -12,7 +12,7 @@ type Props = {
 };
 
 export const ApiListCard = ({ api }: Props) => {
-  const { timeseries, isLoading, isError } = useFetchVerificationTimeseries(api.keyspaceId);
+  const { timeseries, isError } = useFetchVerificationTimeseries(api.keyspaceId);
 
   const passed = timeseries?.reduce((acc, crr) => acc + crr.success, 0) ?? 0;
   const blocked = timeseries?.reduce((acc, crr) => acc + crr.error, 0) ?? 0;
@@ -26,7 +26,8 @@ export const ApiListCard = ({ api }: Props) => {
       chart={
         <StatsTimeseriesBarChart
           data={timeseries}
-          isLoading={isLoading}
+          // INFO: Causing too much lag when there are too many Charts. We'll try to optimize this in the future.
+          isLoading={false}
           isError={isError}
           config={{
             success: {

@@ -44,7 +44,7 @@ export const ApiListGrid = ({
           <ApiListCard api={api} key={api.id} />
         ))}
       </div>
-      <div className="flex flex-col items-center justify-center mt-8 space-y-4">
+      <div className="flex flex-col items-center justify-center mt-8 space-y-4 pb-8">
         <div className="text-center text-sm text-accent-11">
           Showing {apiList.length} of {total} APIs
         </div>

@@ -36,6 +36,7 @@ export const CreateApiButton = ({
 }: React.ButtonHTMLAttributes<HTMLButtonElement> & Props) => {
   const [isOpen, setIsOpen] = useState(defaultOpen ?? false);
   const router = useRouter();
+  const { api } = trpc.useUtils();
 
   const {
     register,
@@ -50,6 +51,7 @@ export const CreateApiButton = ({
     async onSuccess(res) {
       toast.success("Your API has been created");
       await revalidate("/apis");
+      api.overview.query.invalidate();
       router.push(`/apis/${res.id}`);
       setIsOpen(false);
     },

@@ -19,6 +19,7 @@ export async function fetchApiOverview({
     .where(and(eq(schema.apis.workspaceId, workspaceId), isNull(schema.apis.deletedAtM)));
   const total = Number(totalResult[0]?.count || 0);
 
+  // Updated query to include keyAuth and fetch actual keys
   const query = db.query.apis.findMany({
     where: (table, { and, eq, isNull, gt }) => {
       const conditions = [eq(table.workspaceId, workspaceId), isNull(table.deletedAtM)];
@@ -30,6 +31,7 @@ export async function fetchApiOverview({
     with: {
       keyAuth: {
         columns: {
+          id: true, // Include the keyspace ID
           sizeApprox: true,
         },
       },
@@ -44,7 +46,23 @@ export async function fetchApiOverview({
   const nextCursor =
     hasMore && apiItems.length > 0 ? { id: apiItems[apiItems.length - 1].id } : undefined;
 
-  const apiList = await apiItemsWithApproxKeyCounts(apiItems);
+  // Transform the data to include key information
+  const apiList = await Promise.all(
+    apiItems.map(async (api) => {
+      const keyspaceId = api.keyAuth?.id || null;
+
+      return {
+        id: api.id,
+        name: api.name,
+        keyspaceId,
+        keys: [
+          {
+            count: api.keyAuth?.sizeApprox || 0,
+          },
+        ],
+      };
+    }),
+  );
 
   return {
     apiList,

@@ -1,4 +1,4 @@
-import { AppSidebar } from "@/components/app-sidebar";
+import { AppSidebar } from "@/components/navigation/sidebar/app-sidebar";
 import { SidebarMobile } from "@/components/navigation/sidebar/sidebar-mobile";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { getOrgId } from "@/lib/auth";

@@ -1,5 +1,6 @@
 "use client";
 
+import { revalidate } from "@/app/actions";
 import { DialogContainer } from "@/components/dialog-container";
 import { NavbarActionButton } from "@/components/navigation/action-button";
 import { toast } from "@/components/ui/toaster";
@@ -32,6 +33,8 @@ export const CreateNamespaceButton = ({
 }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const { ratelimit } = trpc.useUtils();
+
   const {
     register,
     handleSubmit,
@@ -44,9 +47,11 @@ export const CreateNamespaceButton = ({
   const router = useRouter();
 
   const create = trpc.ratelimit.namespace.create.useMutation({
-    onSuccess(res) {
+    async onSuccess(res) {
       toast.success("Your Namespace has been created");
       router.refresh();
+      await revalidate("/ratelimits");
+      ratelimit.namespace.query.invalidate();
       router.push(`/ratelimits/${res.id}`);
       setIsOpen(false);
     },

@@ -279,7 +279,7 @@ export const Client: React.FC<Props> = ({ apis }) => {
           }
         }}
       >
-        <DialogContent className="flex flex-col max-sm:w-full bg-grayA-1 border-gray-4">
+        <DialogContent className="flex flex-col max-sm:w-full dark:bg-grayA-1 border-gray-4 bg-white">
           <DialogHeader>
             <DialogTitle>Your API Key</DialogTitle>
             <DialogDescription className="w-fit text-accent-10">

@@ -238,7 +238,7 @@ const FlatNavItem = memo(({ item }: { item: NavItem }) => {
           isActive={item.active}
           className={getButtonStyles(item.active, showLoader)}
         >
-          {showLoader ? <AnimatedLoadingSpinner /> : <Icon size="xl-medium" />}
+          {showLoader ? <AnimatedLoadingSpinner /> : Icon ? <Icon size="xl-medium" /> : null}
           <span>{item.label}</span>
         </SidebarMenuButton>
       </NavLink>
@@ -264,7 +264,7 @@ const NestedNavItem = memo(({ item }: { item: NavItem & { items?: NavItem[] } })
             isActive={item.active}
             className={getButtonStyles(item.active, showLoader)}
           >
-            {showLoader ? <AnimatedLoadingSpinner /> : <Icon />}
+            {showLoader ? <AnimatedLoadingSpinner /> : Icon ? <Icon size="xl-medium" /> : null}
             <span>{item.label}</span>
             <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
           </SidebarMenuButton>
@@ -336,6 +336,8 @@ const ToggleSidebarButton = memo(
     toggleNavItem: NavItem;
     toggleSidebar: () => void;
   }) => {
+    const Icon = toggleNavItem.icon;
+
     return (
       <SidebarMenuItem>
         <SidebarMenuButton
@@ -344,7 +346,7 @@ const ToggleSidebarButton = memo(
           className={getButtonStyles(toggleNavItem.active)}
           onClick={toggleSidebar}
         >
-          <toggleNavItem.icon size="xl-medium" />
+          {Icon && <Icon size="xl-medium" />}
           <span>{toggleNavItem.label}</span>
         </SidebarMenuButton>
       </SidebarMenuItem>

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import { getPathForSegment } from "./utils";
+
+// Define style ID to check for duplicates
+const STYLE_ID = "animated-loading-spinner-styles";
+
+// Add styles only once when module is loaded
+if (typeof document !== "undefined" && !document.getElementById(STYLE_ID)) {
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    @media (prefers-reduced-motion: reduce) {
+      [data-prefers-reduced-motion="respect-motion-preference"] {
+        animation: none !important;
+        transition: none !important;
+      }
+    }
+
+    @keyframes spin-slow {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .animate-spin-slow {
+      animation: spin-slow 1.5s linear infinite;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+const SEGMENTS = [
+  "segment-1", // Right top
+  "segment-2", // Right
+  "segment-3", // Right bottom
+  "segment-4", // Bottom
+  "segment-5", // Left bottom
+  "segment-6", // Left
+  "segment-7", // Left top
+  "segment-8", // Top
+];
+
+export const AnimatedLoadingSpinner = () => {
+  const [segmentIndex, setSegmentIndex] = useState(0);
+
+  useEffect(() => {
+    // Animate the segments in sequence
+    const timer = setInterval(() => {
+      setSegmentIndex((prevIndex) => (prevIndex + 1) % SEGMENTS.length);
+    }, 125); // 125ms per segment = 1s for full rotation
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      className="animate-spin-slow"
+      data-prefers-reduced-motion="respect-motion-preference"
+    >
+      <g>
+        {SEGMENTS.map((id, index) => {
+          const distance = (SEGMENTS.length + index - segmentIndex) % SEGMENTS.length;
+          const opacity = distance <= 4 ? 1 - distance * 0.2 : 0.1;
+          return (
+            <path
+              key={id}
+              id={id}
+              style={{
+                fill: "currentColor",
+                opacity: opacity,
+                transition: "opacity 0.12s ease-in-out",
+              }}
+              d={getPathForSegment(index)}
+            />
+          );
+        })}
+        <path
+          d="M9,6.5c-1.379,0-2.5,1.121-2.5,2.5s1.121,2.5,2.5,2.5,2.5-1.121,2.5-2.5-1.121-2.5-2.5-2.5Z"
+          style={{ fill: "currentColor", opacity: 0.6 }}
+        />
+      </g>
+    </svg>
+  );
+};
@@ -0,0 +1,57 @@
+import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { useDelayLoader } from "@/hooks/use-delay-loader";
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import type { NavItem } from "../../../workspace-navigations";
+import { NavLink } from "../nav-link";
+import { AnimatedLoadingSpinner } from "./animated-loading-spinner";
+import { getButtonStyles } from "./utils";
+
+export const FlatNavItem = ({
+  item,
+  onLoadMore,
+}: {
+  item: NavItem & { loadMoreAction?: boolean };
+  onLoadMore?: () => void;
+}) => {
+  const [isPending, startTransition] = useTransition();
+  const showLoader = useDelayLoader(isPending);
+  const router = useRouter();
+  const Icon = item.icon;
+
+  const isLoadMoreButton = item.loadMoreAction === true;
+
+  const handleClick = () => {
+    if (isLoadMoreButton && onLoadMore) {
+      onLoadMore();
+      return;
+    }
+
+    if (!item.external) {
+      startTransition(() => {
+        router.push(item.href);
+      });
+    }
+  };
+
+  return (
+    <SidebarMenuItem>
+      <NavLink
+        href={item.href}
+        external={item.external}
+        onClick={handleClick}
+        isLoadMoreButton={isLoadMoreButton}
+      >
+        <SidebarMenuButton
+          tooltip={item.tooltip}
+          isActive={item.active}
+          className={getButtonStyles(item.active, showLoader)}
+        >
+          {showLoader ? <AnimatedLoadingSpinner /> : Icon ? <Icon size="xl-medium" /> : null}
+          <span>{item.label}</span>
+          {item.tag && <div className="ml-auto">{item.tag}</div>}
+        </SidebarMenuButton>
+      </NavLink>
+    </SidebarMenuItem>
+  );
+};
@@ -0,0 +1,19 @@
+import type { NavItem } from "../../../workspace-navigations";
+import { FlatNavItem } from "./flat-nav-item";
+import { NestedNavItem } from "./nested-nav-item";
+
+export const NavItems = ({
+  item,
+  onLoadMore,
+}: {
+  item: NavItem & {
+    items?: (NavItem & { loadMoreAction?: boolean })[];
+    loadMoreAction?: boolean;
+  };
+  onLoadMore?: () => void;
+}) => {
+  if (!item.items || item.items.length === 0) {
+    return <FlatNavItem item={item} onLoadMore={onLoadMore} />;
+  }
+  return <NestedNavItem item={item} onLoadMore={onLoadMore} />;
+};