feat: search animations

jina-ai · Sep 1, 2021 · 5329001 · 5329001
1 parent c6150e0
commit 5329001
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 37 deletions.
diff --git a/packages/showcases/src/components/SearchBar/DropZone.tsx b/packages/showcases/src/components/SearchBar/DropZone.tsx
@@ -76,50 +76,40 @@ export const DropZone = ({
     addFiles(droppedFiles);
   }, [droppedFiles, addFiles]);
 
-  function triggerFileSelect() {
-    fileRef.current?.click();
-  }
-
   function handleSelectFiles(e: ChangeEvent<HTMLInputElement>) {
     const fileList = e.target.files;
     if (fileList) addFiles(Array.from(fileList));
   }
 
   return (
     <div
+      ref={dropAreaRef}
       className={`bg-white z-10 box-content ${
-        isDragging || files.length ? "h-40" : "h-0"
+        isDragging || files.length ? "h-48" : "h-0"
       } none overflow-hidden absolute w-full bg-white -mb-7 rounded-md text-center mt-0.5 shadow-md transition-all duration-200`}
-      ref={dropAreaRef}
     >
-      <div className="h-full w-full p-2">
-        <div
-          className={`p-2 flex items-center text-center h-full border border-transparent ${
-            isDragging
-              ? "border-primary-500 bg-primary-500 bg-opacity-10 border-dashed"
-              : ""
-          }`}
-        >
-          {files.length ? (
-            files.map((file, idx) => (
+      <div className="h-full w-full p-2 relative">
+        {isDragging ? (
+          <div
+            className={`rounded absolute right-0 left-0 top-0 bottom-0 m-2 flex items-center border border-transparent ${
+              isDragging
+                ? "border-primary-500 bg-primary-500 bg-opacity-10 border-dashed"
+                : ""
+            }`}
+          >
+            <div className="mx-auto">Drop files here</div>
+          </div>
+        ) : (
+          <div className="overflow-auto whitespace-nowrap flex flex-row h-full w-full pb-2">
+            {files.map((file, idx) => (
               <FilePreview
                 key={file.name}
                 file={file}
                 remove={() => removeFile(file.name)}
               />
-            ))
-          ) : (
-            <div className="mx-auto">
-              <button
-                className="border px-4 py-1.5 rounded mr-4"
-                onClick={triggerFileSelect}
-              >
-                Select Files
-              </button>{" "}
-              or drop here
-            </div>
-          )}
-        </div>
+            ))}
+          </div>
+        )}
         <input
           type="file"
           ref={fileRef}

diff --git a/packages/showcases/src/components/SearchBar/SearchBar.tsx b/packages/showcases/src/components/SearchBar/SearchBar.tsx
@@ -16,9 +16,10 @@ const SearchButton = ({ onClick }: { onClick: () => void }) => {
 
 type SearchBarProps = {
   search: (...documents: RawDocumentData[]) => void;
+  searching: boolean;
 };
 
-export const SearchBar = ({ search }: SearchBarProps) => {
+export const SearchBar = ({ search, searching }: SearchBarProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [files, setFiles] = useState<File[]>([]);
 
@@ -47,6 +48,7 @@ export const SearchBar = ({ search }: SearchBarProps) => {
     <div className="p-0.5 w-full bg-primary-500 rounded-lg flex flex-row jina-component">
       <div className="relative flex-1 h-12">
         <SearchInput
+          searching={searching}
           inputRef={inputRef}
           addFiles={addFiles}
           onEnter={handleSearch}

diff --git a/packages/showcases/src/components/SearchBar/SearchInput.tsx b/packages/showcases/src/components/SearchBar/SearchInput.tsx
@@ -5,19 +5,22 @@ import React, {
   useRef,
 } from "react";
 import Image from "next/image";
-import magnifyingGlass from "../../images/magnifyingGlass.svg";
+import jinaIcon from "../../images/magnifyingGlass.svg";
 import imageIcon from "../../images/image.svg";
+import searchingIcon from "../../images/searching.gif";
 
 type InputRef = MutableRefObject<HTMLInputElement | null>;
 
 export const SearchInput = ({
   inputRef,
   addFiles,
   onEnter,
+  searching,
 }: {
   inputRef: InputRef;
   addFiles: (files: File[]) => void;
   onEnter?: () => void;
+  searching: boolean;
 }) => {
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -31,15 +34,20 @@ export const SearchInput = ({
   }
 
   function handleKeyPress(e: KeyboardEvent<HTMLInputElement>) {
-    if (e.key === "enter" && onEnter) {
+    if (e.key === "Enter" && onEnter) {
       return onEnter();
     }
   }
 
   return (
-    <div className="flex flex-row items-center h-full">
-      <div className="absolute ml-4 h-6 flex">
-        <Image src={magnifyingGlass} alt="jina" layout="intrinsic" />
+    <div className="flex flex-row items-center h-full bg-white rounded-md">
+      <div className="absolute ml-4 h-6 w-6 flex">
+        <Image
+          src={searching ? searchingIcon : jinaIcon}
+          alt="jina"
+          layout="intrinsic"
+          objectFit="contain"
+        />
       </div>
       <div className="absolute right-0 mr-4 mb-0 flex border-l border-gray-400 pl-4 h-6">
         <Image
@@ -58,8 +66,11 @@ export const SearchInput = ({
         />
       </div>
       <input
-        className="rounded-md w-full h-full pl-16 border-none outline-none focus:shadow-lg transition-all duration-200"
-        placeholder="Search"
+        className={`rounded-md w-full h-full pl-16 border-none outline-none focus:shadow-lg transition-all duration-200 ${
+          searching ? "bg-primary-500 bg-opacity-10 animate-pulse" : ""
+        }`}
+        disabled={searching}
+        placeholder={searching ? "Searching..." : "Search"}
         ref={inputRef}
         onKeyPress={handleKeyPress}
       />

diff --git a/packages/showcases/src/images/searching.gif b/packages/showcases/src/images/searching.gif