Implement Thumbnail inner

components/SearchBar.tsx

@@ -43,7 +43,6 @@ const SearchBar = () => {
   const [takesALongTime, setTakesALongTime] = useState<boolean>(false);
 
   useEffect(() => {
-    console.log(loading);
     let takeId;
     if (loading)
       takeId = setTimeout(() => {

components/Thumbnail.tsx

@@ -1,10 +1,24 @@
-import { useState } from "react";
+import { useState, Dispatch, SetStateAction, useEffect } from "react";
 import styles from "./Thumbnail.module.css";
 import TrackVisibility from "react-on-screen";
 
 const NO_THUMBNAIL_URL =
   "https://nicovideo.cdn.nimg.jp/web/img/common/no_thumbnail_M.jpg";
 
+const Inner = ({
+  isVisible,
+  setViewable,
+}: {
+  isVisible: boolean;
+  setViewable: Dispatch<SetStateAction<boolean>>;
+}) => {
+  useEffect(() => {
+    if (isVisible) setViewable(isVisible);
+  }, [isVisible]);
+
+  return <></>;
+};
+
 // TODO: https://github.com/naari3/otomad-search/issues/15
 const Thumbnail = ({
   thumbnailUrl,
@@ -23,9 +37,9 @@ const Thumbnail = ({
         partialVisibility={true}
         offset={250}
       >
-        {({ isVisible }) => {
-          if (isVisible) setViewable(isVisible);
-        }}
+        {({ isVisible }) => (
+          <Inner isVisible={isVisible} setViewable={setViewable} />
+        )}
       </TrackVisibility>
       <img
         className={styles.thumb}

lib/useWindowSize.ts

@@ -17,7 +17,6 @@ export function useWindowSize() {
   useEffect(() => {
     // Handler to call on window resize
     function handleResize() {
-      console.log("resize");
       // Set window width/height to state
       setWindowSize({
         width: window.innerWidth,