loader

imdeveshshukla · Sep 8, 2024 · 8bae1f2 · 8bae1f2
1 parent 690897d
commit 8bae1f2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 35 deletions.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/package.json b/backend/package.json
@@ -15,7 +15,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.7",
-    "@prisma/client": "^5.17.0",
+    "@prisma/client": "^5.19.1",
     "axios": "^1.7.2",
     "bcrypt": "^5.1.1",
     "bigint-json": "^1.1.5",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "prisma": "^5.19.1"
   },
-  "prisma":{
-     "seed": "node prisma/seed.js"
+  "prisma": {
+    "seed": "node prisma/seed.js"
   }
 }
diff --git a/frontend/src/assets/SmoothLoaderHome.jsx b/frontend/src/assets/SmoothLoaderHome.jsx
@@ -1,22 +1,22 @@
 const SmoothLoaderHome = () => {
     return (
       <svg
-        width="36px"
-        height="36px"
-        viewBox="0 0 50 50"
+        width="24px"
+        height="24px"
+        viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
+        color='#6c712eb8'
       >
         <circle
-          cx="25"
-          cy="25"
-          r="20"
+          cx="50"
+          cy="50"
+          r="32"
+          strokeWidth="8"
           stroke="currentColor"
-          strokeWidth="5"
+          strokeDasharray="50.26548245743669 50.26548245743669"
           fill="none"
           strokeLinecap="round"
-          strokeDasharray="100"
-          strokeDashoffset="0"
         >
           <animate
             attributeName="stroke-dashoffset"
@@ -25,10 +25,12 @@ const SmoothLoaderHome = () => {
             repeatCount="indefinite"
           />
           <animate
-            attributeName="stroke"
-            values="#727a06;#8b9322;#959b41;#afb467;#e2e4c6"
-            dur="1s"
+            attributeName="transform"
+            type="rotate"
             repeatCount="indefinite"
+            dur="1s"
+            values="0 50 50;360 50 50"
+            keyTimes="0;1"
           />
         </circle>
       </svg>

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
@@ -30,7 +30,6 @@ const Home = () => {
   const onNewPost = useSelector(state => state.onNewPost.value);
   const [reset, setReset] = useState(false);
   const [hasMore, setHasMore] = useState(true);
-
   // Function to get posts and polls
   const getPost = async (reset = false) => {
     setisLoading(true);
@@ -121,15 +120,14 @@ const Home = () => {
 
   // Refresh function for pull down to refresh
   const refresh = async () => {
-    console.log("refresh");
 
     setHasMore(true);
     await handleNewPost(); // Clear posts and reset offsets
   };
-
+  
   return (<>
 
-        <div id="scrollableDiv" className=' xs:pl-8 sm:pl-16 overflow-auto h-fit'>
+<div id="scrollableDiv" className='xs:pl-8 sm:pl-16 overflow-auto h-fit'>
   <InfiniteScroll
     dataLength={posts.length}
     next={fetchMoreData}
@@ -140,19 +138,14 @@ const Home = () => {
         {`${posts.length === 0 ? "It looks like there's no posts to display." : "You've reached the end of the page!"}`}
       </p>
     }
-    refreshFunction={refresh}
-    pullDownToRefresh={true}
-    pullDownToRefreshThreshold={100}
-    pullDownToRefreshContent={
-      <div className=' flex justify-center'><AnimatedFoldDownArrow className=' text-2xl'/></div>
-    }
-    releaseToRefreshContent={
-      <div className=' grid justify-center'><SmoothLoaderHome/></div>
-    }
-    scrollableTarget="scrollableDiv" // Specify the scrollable div
     >
     {isLogin && <Createpost />}
-    <div className="post">
+    <div className='flex items-center justify-end mx-4 mt-3'>
+          <span onClick={() => refresh()} className='bg-[#eff1d3] rounded-full p-1'>
+            {isLoading ? <SmoothLoaderHome /> : <GrRefresh className='cursor-pointer text-[#6c712eb8] text-xl font-extrabold' />}
+          </span>
+        </div>
+    <div className="post" id='post'>
       {posts.length === 0 ? (
         <Postskelton />
       ) : (