Implemented #1

package.json

@@ -21,6 +21,7 @@
 		"next-seo": "^5.1.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-intersection-observer": "^8.33.1",
 		"react-query": "^3.34.16"
 	},
 	"devDependencies": {

src/components/Video/index.tsx

@@ -3,8 +3,9 @@ import axios, { AxiosError } from "axios";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { FC } from "react";
+import { FC, useEffect } from "react";
 
+import { useInView } from "react-intersection-observer/";
 import { useQuery } from "react-query";
 
 import Avatar from "@mui/material/Avatar";
@@ -35,7 +36,10 @@ const Video: FC<VideoModel> = ({
 }) => {
 	const requestFields = ["authorThumbnails"];
 
-	const { isLoading, error, data } = useQuery<Channel, AxiosError<Error>>(
+	const { isLoading, error, data, refetch, isFetched } = useQuery<
+		Channel,
+		AxiosError<Error>
+	>(
 		["channelData", author.id],
 		() =>
 			axios
@@ -44,11 +48,20 @@ const Video: FC<VideoModel> = ({
 						fields: requestFields.join(",")
 					}
 				})
-				.then((res) => res.data)
+				.then((res) => res.data),
+		{ enabled: false }
 	);
 
+	const { ref, inView } = useInView({
+		threshold: 0
+	});
+
 	const router = useRouter();
 
+	useEffect(() => {
+		if (inView && !isFetched) refetch();
+	}, [inView, isFetched, refetch]);
+
 	return (
 		<Card sx={{ width: "100%" }}>
 			<CardActionArea
@@ -67,7 +80,7 @@ const Video: FC<VideoModel> = ({
 						</Typography>
 					</Tooltip>
 					<Link passHref href={`/channel/${author.id}`}>
-						<Box sx={{ display: "flex", alignItems: "center" }}>
+						<Box ref={ref} sx={{ display: "flex", alignItems: "center" }}>
 							{isLoading && <CircularProgress sx={{ mr: 2 }} />}
 							{data && (
 								<Avatar

yarn.lock

@@ -2331,6 +2331,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-intersection-observer@^8.33.1:
+  version "8.33.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64"
+  integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"