Fix weird loading animation for carousels

packages/atlas/src/components/AssetImage/AssetImage.tsx

@@ -27,10 +27,12 @@ export const AssetImage: FC<AssetImageProps> = ({ resolvedUrls, isLoading, type,
       >
         {loading ? (
           <SkeletonLoader className={imgProps.className} />
-        ) : imagePlaceholder && !url ? (
+        ) : url ? (
+          <img {...imgProps} src={url} />
+        ) : imagePlaceholder ? (
           <>{imagePlaceholder}</>
         ) : (
-          <img {...imgProps} src={url} />
+          <span />
         )}
       </CSSTransition>
     </SwitchTransition>

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/types/NftCarouselDetails.tsx

@@ -240,7 +240,7 @@ export const VideoCardWrapper = ({
   details,
 }: VideoCardWrapperProps) => {
   const [isPaused, setIsPaused] = useState(!active)
-  const debouncedActive = useDebounceValue(active, 500)
+  const debouncedActive = useDebounceValue(active, 800, true)
 
   return (
     <Container>
@@ -251,15 +251,15 @@ export const VideoCardWrapper = ({
         {active ? (
           <BackgroundVideoPlayer
             videoId={videoId}
-            withFade={active ? debouncedActive : active}
-            playing={active ? debouncedActive : active}
+            withFade={active ? !!debouncedActive : active}
+            playing={active ? !!debouncedActive : active}
             muted={true}
             onPause={() => setIsPaused(true)}
             onPlay={() => setIsPaused(false)}
             preload="auto"
             src={mediaUrls ?? undefined}
             poster={thumbnailUrls ?? undefined}
-            handleActions={active ? debouncedActive : active}
+            handleActions={active ? !!debouncedActive : active}
             videoPlaytime={30}
             onEnded={goNextSlide}
             customLink={to}

packages/atlas/src/hooks/useDebounceValue.ts

@@ -1,15 +1,24 @@
 import { useEffect, useState } from 'react'
 
-export function useDebounceValue<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+export function useDebounceValue<T, R extends boolean = false>(
+  value: T,
+  delay?: number,
+  emptyInitialValue?: R
+): R extends true ? T | null : T {
+  type ReturnType = R extends true ? T | null : T
+  // Initialize the state with appropriate type
+  const [debouncedValue, setDebouncedValue] = useState<R extends true ? T | null : T>(
+    emptyInitialValue ? (null as ReturnType) : (value as ReturnType)
+  )
 
   useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500)
+    const timer = setTimeout(() => setDebouncedValue(value as ReturnType), delay ?? 500)
 
     return () => {
       clearTimeout(timer)
     }
   }, [value, delay])
 
+  // TypeScript will infer the return type based on the value of emptyInitialValue
   return debouncedValue
 }