fix: dashboard icon flickering (#2170)

* fix: dashboard-icons-flickering

* ran format

apps/dashboard/app/(app)/authorization/permissions/page.tsx

@@ -3,11 +3,11 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { getTenantId } from "@/lib/auth";
 import { asc, db } from "@/lib/db";
+import { permissions } from "@unkey/db/src/schema";
 import { ChevronRight, Scan } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { CreateNewPermission } from "./create-new-permission";
-import { permissions } from "@unkey/db/src/schema";
 
 export const revalidate = 0;
 
@@ -19,7 +19,7 @@ export default async function RolesPage() {
       and(eq(table.tenantId, tenantId), isNull(table.deletedAt)),
     with: {
       permissions: {
-        orderBy:[asc(permissions.name)],
+        orderBy: [asc(permissions.name)],
         with: {
           keys: {
             with: {

apps/dashboard/app/(app)/desktop-sidebar.tsx

@@ -3,6 +3,7 @@ import { Feedback } from "@/components/dashboard/feedback-component";
 import { Badge } from "@/components/ui/badge";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Workspace } from "@/lib/db";
+import { useDelayLoader } from "@/lib/hooks/useDelayLoader";
 import { cn } from "@/lib/utils";
 import {
   BookOpen,
@@ -219,6 +220,7 @@ export const DesktopSidebar: React.FC<Props> = ({ workspace, className }) => {
 
 const NavLink: React.FC<{ item: NavItem }> = ({ item }) => {
   const [isPending, startTransition] = useTransition();
+  const showLoader = useDelayLoader(isPending);
   const router = useRouter();
   const link = (
     <Link
@@ -243,7 +245,7 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => {
     >
       <div className="flex items-center group gap-x-2">
         <span className="flex h-5 w-5 shrink-0 items-center justify-center text-[0.625rem]">
-          {isPending ? (
+          {showLoader ? (
             <Loader2 className="w-5 h-5 shrink-0 animate-spin" />
           ) : (
             <item.icon className="w-5 h-5 shrink-0 [stroke-width:1.25px]" aria-hidden="true" />

apps/dashboard/lib/hooks/useDelayLoader.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export const useDelayLoader = (isPending: boolean, delay = 50) => {
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isPending) {
+      timeout = setTimeout(() => {
+        setShowLoader(true);
+      }, delay);
+    } else {
+      setShowLoader(false);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isPending, delay]);
+
+  return showLoader;
+};

packages/ratelimit/package.json

@@ -14,7 +14,7 @@
     "url": "https://github.com/unkeyed/unkey/issues"
   },
   "homepage": "https://github.com/unkeyed/unkey#readme",
-  "files": ["./dist/**","README.md"],
+  "files": ["./dist/**", "README.md"],
   "author": "Andreas Thomas <andreas@unkey.dev>",
   "scripts": {
     "build": "tsup"