From 367caea4e96b21817dde78be8e0b69970617102a Mon Sep 17 00:00:00 2001
From: jamesschuler <jameshschuler1@gmail.com>
Date: Wed, 31 May 2023 20:42:03 -0700
Subject: [PATCH] Search form tweaks; infinite scroll tweaks

---
 frontend/src/components/SearchForm.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/SearchForm.vue b/frontend/src/components/SearchForm.vue
index 9745fca..f0dbd50 100644
--- a/frontend/src/components/SearchForm.vue
+++ b/frontend/src/components/SearchForm.vue
@@ -4,7 +4,7 @@
     class="p-6 bg-white dark:bg-dark-200 shadow-lg rounded-xl absolute bottom-0 border-2 border-black"
   >
     <div class="flex flex-row p-4 <lg:flex-col">
-      <div class="flex flex-col min-w-xs mr-6 <lg:w-full">
+      <!-- <div class="flex flex-col min-w-xs mr-6 <lg:w-full">
         <label for="location--select" class="mb-2 font-semibold">Location</label>
         <select
           id="location-select"
@@ -13,7 +13,7 @@
         >
           <option selected value="san-diego">San Diego</option>
         </select>
-      </div>
+      </div> -->
       <div class="flex flex-col w-full <lg:mt-4 relative">
         <label for="search-input" class="mb-2 font-semibold">Search Trainers</label>
         <input
@@ -59,11 +59,13 @@ function debounce(func: Function, timeout = 500) {
 
 function handleScroll() {
   throttle(() => {
-    // TODO: this seems too sensitive
-    const endOfPage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
+    const container = document.getElementById("trainers--container");
+    if (container) {
+      const { scrollTop, scrollHeight, clientHeight } = container;
 
-    if (endOfPage) {
-      store.loadNextPage();
+      if (scrollTop + clientHeight >= scrollHeight - 5) {
+        store.loadNextPage();
+      }
     }
   }, 1000);
 }