From 571cb6a648c9d718cf2e22e770cff1fdc5a7736f Mon Sep 17 00:00:00 2001 From: akshay027 Date: Fri, 4 Oct 2024 00:07:13 +0530 Subject: [PATCH 1/2] fix: dashboard-icons-flickering --- apps/dashboard/app/(app)/desktop-sidebar.tsx | 125 ++++++++++--------- apps/dashboard/lib/hooks/useDelayLoader.tsx | 22 ++++ 2 files changed, 91 insertions(+), 56 deletions(-) create mode 100644 apps/dashboard/lib/hooks/useDelayLoader.tsx diff --git a/apps/dashboard/app/(app)/desktop-sidebar.tsx b/apps/dashboard/app/(app)/desktop-sidebar.tsx index 900ff8dcdc..cb6ba30b8c 100644 --- a/apps/dashboard/app/(app)/desktop-sidebar.tsx +++ b/apps/dashboard/app/(app)/desktop-sidebar.tsx @@ -1,9 +1,13 @@ -"use client"; -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 { cn } from "@/lib/utils"; +"use client" +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 { cn } from "@/lib/utils" import { BookOpen, Cable, @@ -17,35 +21,36 @@ import { MonitorDot, Settings2, ShieldCheck, -} from "lucide-react"; -import Link from "next/link"; -import { useSelectedLayoutSegments } from "next/navigation"; -import { useRouter } from "next/navigation"; -import type React from "react"; -import { useTransition } from "react"; -import { WorkspaceSwitcher } from "./team-switcher"; -import { UserButton } from "./user-button"; +} from "lucide-react" +import Link from "next/link" +import { useSelectedLayoutSegments } from "next/navigation" +import { useRouter } from "next/navigation" +import type React from "react" +import { useTransition } from "react" +import { WorkspaceSwitcher } from "./team-switcher" +import { UserButton } from "./user-button" +import { useDelayLoader } from "@/lib/hooks/useDelayLoader" type Props = { workspace: Workspace & { apis: { - id: string; - name: string; - }[]; - }; - className?: string; -}; + id: string + name: string + }[] + } + className?: string +} type NavItem = { - disabled?: boolean; - tooltip?: string; - icon: LucideIcon | React.ElementType; - href: string; - external?: boolean; - label: string; - active?: boolean; - tag?: React.ReactNode; - hidden?: boolean; -}; + disabled?: boolean + tooltip?: string + icon: LucideIcon | React.ElementType + href: string + external?: boolean + label: string + active?: boolean + tag?: React.ReactNode + hidden?: boolean +} const DiscordIcon = () => ( ( /> -); +) -const Tag: React.FC<{ label: string; className?: string }> = ({ label, className }) => ( +const Tag: React.FC<{ label: string; className?: string }> = ({ + label, + className, +}) => (
{label}
-); +) export const DesktopSidebar: React.FC = ({ workspace, className }) => { - const segments = useSelectedLayoutSegments() ?? []; + const segments = useSelectedLayoutSegments() ?? [] const workspaceNavigation: NavItem[] = [ { icon: Cable, @@ -137,7 +145,7 @@ export const DesktopSidebar: React.FC = ({ workspace, className }) => { label: "Settings", active: segments.at(0) === "settings", }, - ].filter((n) => !n.hidden); + ].filter((n) => !n.hidden) const resourcesNavigation: NavItem[] = [ { icon: BookOpen, @@ -151,16 +159,16 @@ export const DesktopSidebar: React.FC = ({ workspace, className }) => { external: true, label: "Discord", }, - ]; + ] - const firstOfNextMonth = new Date(); - firstOfNextMonth.setUTCMonth(firstOfNextMonth.getUTCMonth() + 1); - firstOfNextMonth.setDate(1); + const firstOfNextMonth = new Date() + firstOfNextMonth.setUTCMonth(firstOfNextMonth.getUTCMonth() + 1) + firstOfNextMonth.setDate(1) return ( - ); -}; + ) +} const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { - const [isPending, startTransition] = useTransition(); - const router = useRouter(); + const [isPending, startTransition] = useTransition() + const showLoader = useDelayLoader(isPending) + const router = useRouter() const link = ( = ({ item }) => { onClick={() => { if (!item.external) { startTransition(() => { - router.push(item.href); - }); + router.push(item.href) + }) } }} target={item.external ? "_blank" : undefined} @@ -238,22 +248,25 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { "bg-background border-border text-content [box-shadow:0px_1px_3px_0px_rgba(0,0,0,0.03)]": item.active, "text-content-subtle pointer-events-none": item.disabled, - }, + } )} >
- {isPending ? ( + {showLoader ? ( ) : ( -

{item.label}

{item.tag} - ); + ) if (item.tooltip) { return ( @@ -263,7 +276,7 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { {item.tooltip} - ); + ) } - return link; -}; + return link +} diff --git a/apps/dashboard/lib/hooks/useDelayLoader.tsx b/apps/dashboard/lib/hooks/useDelayLoader.tsx new file mode 100644 index 0000000000..826e4e7574 --- /dev/null +++ b/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 +} From dc9022fc5ba4fe5046bfa055bfe90e9ca0d25f80 Mon Sep 17 00:00:00 2001 From: akshay027 Date: Fri, 4 Oct 2024 00:11:28 +0530 Subject: [PATCH 2/2] ran format --- .../(app)/authorization/permissions/page.tsx | 4 +- apps/dashboard/app/(app)/desktop-sidebar.tsx | 125 ++++++++---------- apps/dashboard/lib/hooks/useDelayLoader.tsx | 24 ++-- packages/ratelimit/package.json | 2 +- 4 files changed, 72 insertions(+), 83 deletions(-) diff --git a/apps/dashboard/app/(app)/authorization/permissions/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/page.tsx index 0f679cfbdc..9865d67916 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/page.tsx +++ b/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: { diff --git a/apps/dashboard/app/(app)/desktop-sidebar.tsx b/apps/dashboard/app/(app)/desktop-sidebar.tsx index cb6ba30b8c..bdaa813267 100644 --- a/apps/dashboard/app/(app)/desktop-sidebar.tsx +++ b/apps/dashboard/app/(app)/desktop-sidebar.tsx @@ -1,13 +1,10 @@ -"use client" -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 { cn } from "@/lib/utils" +"use client"; +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, Cable, @@ -21,36 +18,35 @@ import { MonitorDot, Settings2, ShieldCheck, -} from "lucide-react" -import Link from "next/link" -import { useSelectedLayoutSegments } from "next/navigation" -import { useRouter } from "next/navigation" -import type React from "react" -import { useTransition } from "react" -import { WorkspaceSwitcher } from "./team-switcher" -import { UserButton } from "./user-button" -import { useDelayLoader } from "@/lib/hooks/useDelayLoader" +} from "lucide-react"; +import Link from "next/link"; +import { useSelectedLayoutSegments } from "next/navigation"; +import { useRouter } from "next/navigation"; +import type React from "react"; +import { useTransition } from "react"; +import { WorkspaceSwitcher } from "./team-switcher"; +import { UserButton } from "./user-button"; type Props = { workspace: Workspace & { apis: { - id: string - name: string - }[] - } - className?: string -} + id: string; + name: string; + }[]; + }; + className?: string; +}; type NavItem = { - disabled?: boolean - tooltip?: string - icon: LucideIcon | React.ElementType - href: string - external?: boolean - label: string - active?: boolean - tag?: React.ReactNode - hidden?: boolean -} + disabled?: boolean; + tooltip?: string; + icon: LucideIcon | React.ElementType; + href: string; + external?: boolean; + label: string; + active?: boolean; + tag?: React.ReactNode; + hidden?: boolean; +}; const DiscordIcon = () => ( ( /> -) +); -const Tag: React.FC<{ label: string; className?: string }> = ({ - label, - className, -}) => ( +const Tag: React.FC<{ label: string; className?: string }> = ({ label, className }) => (
{label}
-) +); export const DesktopSidebar: React.FC = ({ workspace, className }) => { - const segments = useSelectedLayoutSegments() ?? [] + const segments = useSelectedLayoutSegments() ?? []; const workspaceNavigation: NavItem[] = [ { icon: Cable, @@ -145,7 +138,7 @@ export const DesktopSidebar: React.FC = ({ workspace, className }) => { label: "Settings", active: segments.at(0) === "settings", }, - ].filter((n) => !n.hidden) + ].filter((n) => !n.hidden); const resourcesNavigation: NavItem[] = [ { icon: BookOpen, @@ -159,16 +152,16 @@ export const DesktopSidebar: React.FC = ({ workspace, className }) => { external: true, label: "Discord", }, - ] + ]; - const firstOfNextMonth = new Date() - firstOfNextMonth.setUTCMonth(firstOfNextMonth.getUTCMonth() + 1) - firstOfNextMonth.setDate(1) + const firstOfNextMonth = new Date(); + firstOfNextMonth.setUTCMonth(firstOfNextMonth.getUTCMonth() + 1); + firstOfNextMonth.setDate(1); return ( - ) -} + ); +}; const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { - const [isPending, startTransition] = useTransition() - const showLoader = useDelayLoader(isPending) - const router = useRouter() + const [isPending, startTransition] = useTransition(); + const showLoader = useDelayLoader(isPending); + const router = useRouter(); const link = ( = ({ item }) => { onClick={() => { if (!item.external) { startTransition(() => { - router.push(item.href) - }) + router.push(item.href); + }); } }} target={item.external ? "_blank" : undefined} @@ -248,7 +240,7 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { "bg-background border-border text-content [box-shadow:0px_1px_3px_0px_rgba(0,0,0,0.03)]": item.active, "text-content-subtle pointer-events-none": item.disabled, - } + }, )} >
@@ -256,17 +248,14 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { {showLoader ? ( ) : ( -
{item.tag} - ) + ); if (item.tooltip) { return ( @@ -276,7 +265,7 @@ const NavLink: React.FC<{ item: NavItem }> = ({ item }) => { {item.tooltip} - ) + ); } - return link -} + return link; +}; diff --git a/apps/dashboard/lib/hooks/useDelayLoader.tsx b/apps/dashboard/lib/hooks/useDelayLoader.tsx index 826e4e7574..8798867940 100644 --- a/apps/dashboard/lib/hooks/useDelayLoader.tsx +++ b/apps/dashboard/lib/hooks/useDelayLoader.tsx @@ -1,22 +1,22 @@ -import { useEffect, useState } from "react" +import { useEffect, useState } from "react"; export const useDelayLoader = (isPending: boolean, delay = 50) => { - const [showLoader, setShowLoader] = useState(false) + const [showLoader, setShowLoader] = useState(false); useEffect(() => { - let timeout: NodeJS.Timeout + let timeout: NodeJS.Timeout; if (isPending) { - timeout = setTimeout(() => { - setShowLoader(true) - }, delay) + timeout = setTimeout(() => { + setShowLoader(true); + }, delay); } else { - setShowLoader(false) + setShowLoader(false); } return () => { - clearTimeout(timeout) - } - }, [isPending, delay]) + clearTimeout(timeout); + }; + }, [isPending, delay]); - return showLoader -} + return showLoader; +}; diff --git a/packages/ratelimit/package.json b/packages/ratelimit/package.json index 459ce97791..9a6e05f38e 100644 --- a/packages/ratelimit/package.json +++ b/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 ", "scripts": { "build": "tsup"