Add debounce open to profile overview (#2125)

onlydustxyz · May 17, 2024 · 770bd03 · 770bd03
1 parent 63e444f
commit 770bd03
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/components/features/contributor/contributor.tsx b/components/features/contributor/contributor.tsx
@@ -1,5 +1,6 @@
+import { debounce } from "lodash";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 import { IMAGES } from "src/assets/img";
 import { cn } from "src/utils/cn";
@@ -26,16 +27,34 @@ export function Contributor({
   avatarProps,
 }: TContributor.Props) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isPreload, setIsPreload] = useState(false);
   const router = useRouter();
   const Component = clickable ? "button" : "div";
 
+  const debounceOpen = useCallback(
+    debounce((open: boolean) => {
+      setIsOpen(open);
+    }, 500),
+    []
+  );
+
+  function toggleCard(open: boolean) {
+    setIsPreload(open);
+    debounceOpen(open);
+
+    if (!open) {
+      setIsOpen(false);
+    }
+  }
+
   return (
     <ProfileCardPopover
       githubId={githubUserId}
       isOpen={isOpen}
-      onMouseEnter={() => setIsOpen(true)}
-      onMouseLeave={() => setIsOpen(false)}
-      onClick={() => setIsOpen(false)}
+      isPreload={isPreload}
+      onMouseEnter={() => toggleCard(true)}
+      onMouseLeave={() => toggleCard(false)}
+      onClick={() => toggleCard(false)}
     >
       <Component
         type={clickable ? "button" : undefined}
@@ -55,10 +74,10 @@ export function Contributor({
           variant="body-s"
           {...typograhy}
           className={cn({
-            "block truncate transition-all group-hover/contributor:text-spacePurple-300": clickable,
+            "relative block truncate transition-all group-hover/contributor:text-spacePurple-300": clickable,
           })}
         >
-          <div className="flex flex-row gap-1">
+          <div className="relative flex flex-row gap-1 truncate">
             <span>{login}</span>
             {isYou ? <Translate token="v2.features.contributors.isYou" /> : null}
             {hasPendingInvite && !isYou ? <Translate token="v2.features.contributors.hasPendingInvite" /> : null}

diff --git a/components/features/profile-card/profile-card.popover.tsx b/components/features/profile-card/profile-card.popover.tsx
@@ -7,9 +7,15 @@ import { ProfileCard } from "components/features/profile-card/profile-card";
 import { ProfileCardLoading } from "components/features/profile-card/profile-card.loading";
 import { TProfileCard } from "components/features/profile-card/profile-card.types";
 
-export function ProfileCardPopover({ children, githubId, isOpen, ...PopOverProps }: TProfileCard.ProfilePopoverProps) {
+export function ProfileCardPopover({
+  children,
+  githubId,
+  isOpen,
+  isPreload,
+  ...PopOverProps
+}: TProfileCard.ProfilePopoverProps) {
   const { data: userProfile } = usersApiClient.queries.useGetUserPublicProfileByGithubId(githubId, {
-    enabled: isOpen,
+    enabled: isPreload || isOpen,
   });
 
   const renderContent = useMemo(() => {

diff --git a/components/features/profile-card/profile-card.types.ts b/components/features/profile-card/profile-card.types.ts
@@ -34,6 +34,7 @@ export namespace TProfileCard {
   export interface ProfilePopoverProps extends PropsWithChildren, basePopOverProps {
     className?: string;
     githubId: number;
+    isPreload?: boolean;
   }
 
   export interface LoadingProps extends Variants {