Add scroll, languages, settings

src/components/view-component/view-component.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Background } from '../../assets'
+import { ANIMATION_DURATION } from '../../utils'
 
 import './view-component.scss'
 
@@ -11,25 +12,25 @@ interface Props {
 
 export const ViewComponent = ({src}: Props) => {
     const [imageSrc, setImageSrc] = useState(Background)
-    const isImage = useMemo(() => imageSrc !== Background, [imageSrc])
 
     useEffect(() => {
-        setTimeout(() => {
+        const timer = setTimeout(() => {
             const image = new Image()
             image.src = src
             image.onload = () => {
                 setImageSrc(src)
             }
-        }, 500)
+        }, ANIMATION_DURATION)
+        return () => {
+            clearTimeout(timer)
+        }
     }, [src])
 
     return (
             <div
                     className='view'
                     style={{
-                        backgroundImage: `url(${imageSrc})`,
-                        backgroundRepeat: `${isImage ? 'no-repeat' : 'repeat'}`,
-                        backgroundSize: `${isImage ? 'cover' : '256px'}`
+                        backgroundImage: `url(${imageSrc})`
                     }}
             />
     )