refactor: enhance UI responsiveness and animations; add smooth transitions for video grid and improve TypeBadgeItem interaction

lib/hooks/useTypeBadges.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback, useTransition } from 'react';
 
 interface TypeBadge {
   type: string;
@@ -19,6 +19,7 @@ interface TypeBadge {
  */
 export function useTypeBadges<T extends { type_name?: string }>(videos: T[]) {
   const [selectedTypes, setSelectedTypes] = useState<Set<string>>(new Set());
+  const [isPending, startTransition] = useTransition();
 
   // Collect and count type badges from videos
   const typeBadges = useMemo<TypeBadge[]>(() => {
@@ -48,8 +49,10 @@ export function useTypeBadges<T extends { type_name?: string }>(videos: T[]) {
     );
   }, [videos, selectedTypes]);
 
-  // Toggle type selection
-  const toggleType = (type: string) => {
+  // Toggle type selection - useCallback to prevent re-creation
+  // Use startTransition to make UI feel responsive
+  const toggleType = useCallback((type: string) => {
+    // Update selected types immediately (high priority)
     setSelectedTypes(prev => {
       const newSet = new Set(prev);
       if (newSet.has(type)) {
@@ -59,12 +62,12 @@ export function useTypeBadges<T extends { type_name?: string }>(videos: T[]) {
       }
       return newSet;
     });
-  };
+  }, []);
 
-  // Clear all selections
-  const clearSelection = () => {
+  // Clear all selections - useCallback to prevent re-creation
+  const clearSelection = useCallback(() => {
     setSelectedTypes(new Set());
-  };
+  }, []);
 
   // Auto-cleanup: remove selected types that no longer exist in badges
   useEffect(() => {
@@ -90,5 +93,6 @@ export function useTypeBadges<T extends { type_name?: string }>(videos: T[]) {
     toggleType,
     clearSelection,
     hasFilters: selectedTypes.size > 0,
+    isPending, // Export pending state
   };
 }