Implement react-intersection-observer to facilitate infinite scroll

Uses react-intersection-observer to load more comments when the last of the previously loaded comments is in the viewport.
This commit is contained in:
Aaron William Po
2023-04-09 18:41:58 -04:00
parent 8981bcb4b8
commit 915adb722a
12 changed files with 157 additions and 109 deletions

15
package-lock.json generated
View File

@@ -35,6 +35,7 @@
"react-email": "^1.9.0",
"react-hook-form": "^7.43.9",
"react-icons": "^4.8.0",
"react-intersection-observer": "^9.4.3",
"sparkpost": "^2.1.4",
"swr": "^2.1.2",
"zod": "^3.21.4"
@@ -8341,6 +8342,14 @@
"react": "*"
}
},
"node_modules/react-intersection-observer": {
"version": "9.4.3",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
"integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15901,6 +15910,12 @@
"integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
"requires": {}
},
"react-intersection-observer": {
"version": "9.4.3",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
"integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",