fix: changed the package used for pull to refresh #33

Apparently, the react-pull-to-refresh package i used before, caused a touch action bug, even when you specify the attribute hammerOptions={{ touchAction: 'auto' }} it bugs the pull down and doesn't refresh anymore, then i found react-simple-pull-to-refresh package and used it, its seems to be all working, plus i added the loading spinner.
The package has an impelentation for fetching data too i guess, but i opted for my implementation since i had it already setup.
For reference: https://www.npmjs.com/package/react-simple-pull-to-refresh?activeTab=readme

apps/app/package.json

@@ -44,8 +44,8 @@
     "react-hook-form": "^7.46.1",
     "react-i18next": "^13.2.2",
     "react-leaflet": "^4.2.1",
-    "react-pull-to-refresh": "^2.0.1",
     "react-router-dom": "^6.16.0",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "shared": "workspace:*",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",

apps/app/src/pages/help.tsx

@@ -3,8 +3,8 @@ import FilterButton from '../components/molecules/FilterButton';
 import Card from '../components/molecules/card';
 import { useTranslation } from 'react-i18next';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import ReactPullToRefresh from 'react-pull-to-refresh';
-
+import PullToRefresh from 'react-simple-pull-to-refresh';
+import LoadingSpinner from '../components/atoms/loading-spinner';
 const MAX = 60;
 
 const Help = () => {
@@ -60,15 +60,32 @@ const Help = () => {
           <FilterButton />
         </div>
       </div>
-      <ReactPullToRefresh onRefresh={handleRefresh} className="">
+      <PullToRefresh
+        isPullable={true}
+        canFetchMore={false}
+        onRefresh={handleRefresh}
+        pullDownThreshold={70}
+        maxPullDownDistance={70}
+        resistance={4}
+        refreshingContent={
+          <div className="flex items-center justify-center h-full">
+            <LoadingSpinner className="w-12 h-12" />
+          </div>
+        }
+        pullingContent={
+          <div className="flex items-center justify-center h-full">
+            <LoadingSpinner className="w-12 h-12" />
+          </div>
+        }
+      >
         <ul className="flex flex-col gap-4 px-4">
           {data.map((item, index) => (
-            <li className="list-none" key={item} ref={index === data.length - 1 ? lastItemRef : null}>
+            <li className="list-none m-0 p-0" key={index} ref={index === data.length - 1 ? lastItemRef : null}>
               <Card key={index} className="" />
             </li>
           ))}
         </ul>
-      </ReactPullToRefresh>
+      </PullToRefresh>
     </div>
   );
 };