[Feat]-Adding-Top-loader-bar

Curio-org · Nov 3, 2024 · 6587eeb · 6587eeb
1 parent ef8d0bc
commit 6587eeb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/components/UnderHeader/Searchbar.tsx b/src/components/UnderHeader/Searchbar.tsx
@@ -1,6 +1,7 @@
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useState, useRef } from "react";
 import { Input, Button } from "rsuite";
 import SearchIcon from "@rsuite/icons/Search";
+import LoadingBar from 'react-top-loading-bar';
 import "./SearchBar.css";
 
 interface SearchbarProps {
@@ -9,18 +10,25 @@ interface SearchbarProps {
 
 const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
   const [term, setTerm] = useState<string>("");
+  const loadingBarRef = useRef<any>(null); 
 
   const handleChange = (value: string) => {
     setTerm(value);
   };
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    loadingBarRef.current.continuousStart(); 
     handleFormSubmit(term);
+
+    setTimeout(() => {
+      loadingBarRef.current.complete();
+    }, 300); 
   };
 
   return (
     <div>
+      <LoadingBar color="#f11946" height={3} ref={loadingBarRef} />
       <form onSubmit={handleSubmit}>
         <div className="curio__search">
           <div className="curio__search__input">
@@ -31,7 +39,7 @@ const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
               type="text"
               placeholder="Search Video..."
             />
-            <Button onClick={() => handleSubmit} type="submit">
+            <Button type="submit">
               <SearchIcon />
             </Button>
           </div>

diff --git a/src/components/Video/VideoItem.tsx b/src/components/Video/VideoItem.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Button } from "rsuite";
+import LoadingBar from "react-top-loading-bar";
 import "./video.css";
 
 interface VideoItemProps {
@@ -27,8 +28,28 @@ const VideoItem: React.FC<VideoItemProps> = ({
   setPlayId,
   setRecId,
 }) => {
+  const loadingBarRef = useRef<any>(null);
+
+  const handleWatch = (videoId: string) => {
+    loadingBarRef.current.continuousStart();
+    setTimeout(() => {
+      setPlayId(videoId);
+      loadingBarRef.current.complete();
+    },1500); 
+  };
+
+  const handleTranslate = (videoId: string) => {
+
+    loadingBarRef.current.continuousStart();
+    setTimeout(() => {
+      setRecId(videoId);
+      loadingBarRef.current.complete();
+    }, 1000);
+  };
+
   return (
     <div className="video_item">
+      <LoadingBar color="#f11946" height={3} ref={loadingBarRef} />
       <img
         src={video.snippet.thumbnails.medium.url}
         alt={video.snippet.description}
@@ -41,10 +62,10 @@ const VideoItem: React.FC<VideoItemProps> = ({
           <p>{video.snippet.channelTitle}</p>
         </div>
         <span className="watch">
-          <Button onClick={() => setPlayId(video.id.videoId)}>Watch</Button>
+          <Button onClick={() => handleWatch(video.id.videoId)}>Watch</Button>
         </span>
         <span className="translate">
-          <Button onClick={() => setRecId(video.id.videoId)}>Translate</Button>
+          <Button onClick={() => handleTranslate(video.id.videoId)}>Translate</Button>
         </span>
       </div>
     </div>