Skip to content

refactor: add minimized load more #3399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ogzhanolguncu merged 5 commits into from
Jul 8, 2025
Merged

refactor: add minimized load more #3399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5ee6d79
refactor: add minimized load more
ogzhanolguncu Jun 23, 2025
ffe040d
chore: fmt
ogzhanolguncu Jun 23, 2025
3385e21
refactor: get rid of useEffect animation
ogzhanolguncu Jun 23, 2025
6a63c3b
chore: fmt
ogzhanolguncu Jun 23, 2025
7645993
Merge branch 'main' into refactor-minimized-load-more
ogzhanolguncu Jul 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
248 changes: 122 additions & 126 deletions ...Id]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ConfirmPopover } from "@/components/confirmation-popover";
import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
import { ArrowOppositeDirectionY, Ban, CircleCheck, Trash, XMark } from "@unkey/icons";
import { Button } from "@unkey/ui";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@unkey/ui/src/lib/utils";
import { useRef, useState } from "react";
import { useDeleteKey } from "../actions/components/hooks/use-delete-key";
import { useBatchUpdateKeyStatus } from "../actions/components/hooks/use-update-key-status";
Expand All @@ -24,6 +24,7 @@ export const SelectionControls = ({
const [isBatchEditExternalIdOpen, setIsBatchEditExternalIdOpen] = useState(false);
const [isDisableConfirmOpen, setIsDisableConfirmOpen] = useState(false);
const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);

const disableButtonRef = useRef<HTMLButtonElement>(null);
const deleteButtonRef = useRef<HTMLButtonElement>(null);

Expand Down Expand Up @@ -57,98 +58,84 @@ export const SelectionControls = ({
(key) => selectedKeys.has(key.id) && key.identity_id,
).length;

if (selectedKeys.size === 0) {
return null;
}

return (
<>
<AnimatePresence>
{selectedKeys.size > 0 && (
<motion.div
key="selection-controls"
className="border-b border-grayA-3"
initial={{ opacity: 0, y: 10 }}
animate={{
opacity: 1,
y: 5,
transition: {
opacity: { duration: 0.3, ease: "easeOut" },
y: { duration: 0.3, ease: "easeOut" },
},
}}
exit={{
opacity: 0,
y: 10,
transition: {
opacity: { duration: 0.3, ease: "easeIn" },
y: { duration: 0.3, ease: "easeIn" },
},
}}
>
<div className="flex justify-between items-center w-full p-[18px]">
<div className="items-center flex gap-2">
<AnimatedCounter value={selectedKeys.size} />
<div className="text-accent-9 text-[13px] leading-6">selected</div>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
onClick={() => setIsBatchEditExternalIdOpen(true)}
>
<ArrowOppositeDirectionY size="sm-regular" /> Change External ID
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={getSelectedKeysState() !== "all-disabled" || updateKeyStatus.isLoading}
loading={updateKeyStatus.isLoading}
onClick={() =>
updateKeyStatus.mutate({
enabled: true,
keyIds: Array.from(selectedKeys),
})
}
>
<CircleCheck size="sm-regular" />
Enable key
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={getSelectedKeysState() !== "all-enabled" || updateKeyStatus.isLoading}
loading={updateKeyStatus.isLoading}
onClick={handleDisableButtonClick}
ref={disableButtonRef}
>
<Ban size="sm-regular" />
Disable key
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={deleteKey.isLoading}
loading={deleteKey.isLoading}
onClick={handleDeleteButtonClick}
ref={deleteButtonRef}
>
<Trash size="sm-regular" />
Delete key
</Button>
<Button
size="icon"
variant="ghost"
className="[&_svg]:size-[14px] ml-3"
onClick={() => setSelectedKeys(new Set())}
>
<XMark />
</Button>
</div>
</div>
</motion.div>
<div
className={cn(
"border-b border-grayA-3",
"animate-slideInFromTop opacity-0 translate-y-2",
"animation-fill-mode-forwards",
)}
</AnimatePresence>
>
<div className="flex justify-between items-center w-full p-[18px]">
<div className="items-center flex gap-2">
<AnimatedCounter value={selectedKeys.size} />
<div className="text-accent-9 text-[13px] leading-6">selected</div>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
onClick={() => setIsBatchEditExternalIdOpen(true)}
>
<ArrowOppositeDirectionY size="sm-regular" /> Change External ID
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={getSelectedKeysState() !== "all-disabled" || updateKeyStatus.isLoading}
loading={updateKeyStatus.isLoading}
onClick={() =>
updateKeyStatus.mutate({
enabled: true,
keyIds: Array.from(selectedKeys),
})
}
>
<CircleCheck size="sm-regular" />
Enable key
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={getSelectedKeysState() !== "all-enabled" || updateKeyStatus.isLoading}
loading={updateKeyStatus.isLoading}
onClick={handleDisableButtonClick}
ref={disableButtonRef}
>
<Ban size="sm-regular" />
Disable key
</Button>
<Button
variant="outline"
size="sm"
className="text-gray-12 font-medium text-[13px]"
disabled={deleteKey.isLoading}
loading={deleteKey.isLoading}
onClick={handleDeleteButtonClick}
ref={deleteButtonRef}
>
<Trash size="sm-regular" />
Delete key
</Button>
<Button
size="icon"
variant="ghost"
className="[&_svg]:size-[14px] ml-3"
onClick={() => setSelectedKeys(new Set())}
>
<XMark />
</Button>
</div>
</div>
</div>

<ConfirmPopover
isOpen={isDisableConfirmOpen}
Expand Down Expand Up @@ -186,50 +173,59 @@ export const SelectionControls = ({
onClose={() => setIsBatchEditExternalIdOpen(false)}
/>
)}
</>
);
};

const AnimatedDigit = ({ digit, index }: { digit: string; index: number }) => {
return (
<motion.span
key={`${digit}-${index}`}
initial={{ opacity: 0, y: -20 }}
animate={{
opacity: 1,
y: 0,
transition: {
type: "spring",
stiffness: 300,
damping: 30,
delay: index * 0.1,
},
}}
exit={{ opacity: 0, y: 20 }}
className="inline-block"
>
{digit}
</motion.span>
<style jsx>{`
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.animate-slideInFromTop {
animation: slideInFromTop 0.3s ease-out;
}

.animate-bounceIn {
animation: bounceIn 0.4s ease-out;
}

.animation-fill-mode-forwards {
animation-fill-mode: forwards;
}
`}</style>
</>
);
};

export const AnimatedCounter = ({ value }: { value: number }) => {
const digits = value.toString().split("");

return (
<div
className="size-[18px] text-[11px] leading-6 ring-2 ring-gray-6 flex items-center justify-center font-medium overflow-hidden
p-2 text-white dark:text-black bg-accent-12 hover:bg-accent-12/90 focus:hover:bg-accent-12 rounded-md border border-grayA-4
"
key={`counter-${value}`}
className={cn(
"size-[18px] text-[11px] leading-6 ring-2 ring-gray-6 flex items-center justify-center font-medium overflow-hidden p-2 text-white dark:text-black bg-accent-12 hover:bg-accent-12/90 focus:hover:bg-accent-12 rounded-md border border-grayA-4",
"animate-bounceIn",
)}
>
<AnimatePresence mode="wait">
<div key={value} className="flex items-center justify-center">
{digits.map((digit, index) => (
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
<AnimatedDigit key={index} digit={digit} index={index} />
))}
</div>
</AnimatePresence>
<span className="flex items-center justify-center">{value}</span>
</div>
);
};
Loading
Loading