fix style: improve style of search loading state

frontend/package.json

@@ -23,8 +23,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.2.1",
+    "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5",
-    "spinners-react": "^1.0.7",
     "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },

frontend/src/app/search/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import LoadingSearchResult from '@/components/search/loading-search-result'
 import NewSearch from '@/components/search/new-search'
 import NewSearchResponse from '@/components/search/new-search-response'
 import Thread from '@/components/search/thread'
@@ -101,7 +102,13 @@ export default function Search() {
           handleSetSearchQuery={handleSetSearchQuery}
         />
       ) : isLoading ? (
-        <>{isStreaming ? <NewSearchResponse response={newSearchResult} /> : <SearchResultPageSkeleton />}</>
+        <>
+          {isStreaming ? (
+            <NewSearchResponse response={newSearchResult} />
+          ) : (
+            <LoadingSearchResult className="mt-4" searchQuery={searchQuery} />
+          )}
+        </>
       ) : (
         <NewSearch
           handleSearch={() => {

frontend/src/components/search/loading-search-result.tsx

@@ -0,0 +1,27 @@
+import React, { HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+import SearchTitle from './search-title'
+import { Span } from '../lib/typography'
+import PropagateLoader from 'react-spinners/PropagateLoader'
+
+type LoadingSearchResultProps = HTMLAttributes<HTMLDivElement> & {
+  searchQuery: string
+}
+
+export default function LoadingSearchResult(props: LoadingSearchResultProps) {
+  return (
+    <div className={twMerge('w-full flex', props.className)}>
+      <div className={twMerge('w-full max-w-[900px] mx-auto px-10 flex flex-col justify-between', props.className)}>
+        <SearchTitle title={props.searchQuery} />
+        <div className="flex flex-col">
+          <div className="flex items-center gap-x-3 my-6">
+            <img src="images/answer-logo.svg" className="h-4 w-auto" alt="answer-logo" />
+            <Span className="font-light text-white/80 text-lg">Answer</Span>
+          </div>
+        </div>
+        <PropagateLoader className="mx-auto" color="white" aria-label="Loading Spinner" size={10} loading={true} />
+      </div>
+      <div className="w-72 flex-none"></div>
+    </div>
+  )
+}

frontend/src/components/search/new-search-response.tsx

@@ -20,8 +20,8 @@ export default function NewSearchResponse(props: NewSearchResponseProps) {
           <SearchTitle className="mx-10 mt-10" title={props.response[0]?.search.query} />
           <div className="flex flex-col px-10">
             <div className="flex items-center gap-x-3 my-6">
-              <img src="images/answer-logo.svg" className="w-10 h-10" alt="answer-logo" />
-              <Span className="font-light text-white/80 text-xl">Answer</Span>
+              <img src="images/answer-logo.svg" className="h-4 w-auto" alt="answer-logo" />
+              <Span className="font-light text-white/80 text-lg">Answer</Span>
             </div>
             <SearchResponse
               className="w-full"

frontend/src/components/search/new-thread-search.tsx

@@ -3,12 +3,13 @@ import _ from 'lodash'
 import { HTMLAttributes } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { Span } from '../lib/typography'
-import SearchResultSkeleton from '../skeletons/search-result-skeleton'
+import LoadingSearchResult from './loading-search-result'
 import SearchResponse from './search-response'
-import SourcesMenu from './sources-menu'
 import SearchTitle from './search-title'
+import SourcesMenu from './sources-menu'
 
 type NewThreadSearchProps = HTMLAttributes<HTMLDivElement> & {
+  searchQuery: string
   response: SearchByIdResponse[]
   isStreaming: boolean
 }
@@ -42,7 +43,7 @@ export default function NewThreadSearch(props: NewThreadSearchProps) {
           </div>
         </div>
       ) : (
-        <SearchResultSkeleton className="mx-10" />
+        <LoadingSearchResult searchQuery={props.searchQuery} />
       )}
     </>
   )

frontend/src/components/search/thread.tsx

@@ -40,8 +40,10 @@ export default function Thread(props: ThreadProps) {
   }
 
   useEffect(() => {
-    scrollToBottom()
-  }, [isLoading, newSearchResult])
+    if (isCompleted || isLoading) {
+      scrollToBottom()
+    }
+  }, [isCompleted, isLoading])
 
   useEffect(() => {
     props.handleSetSearchQuery('')
@@ -91,7 +93,11 @@ export default function Thread(props: ThreadProps) {
               {props.data.searches.length !== 1 && <div className="h-0.5 bg-white/20 ml-10 mr-6"></div>}
             </Fragment>
           ))}
-          {isLoading ? <NewThreadSearch response={newSearchResult} isStreaming={isStreaming} /> : <></>}
+          {isLoading ? (
+            <NewThreadSearch searchQuery={props.searchQuery} response={newSearchResult} isStreaming={isStreaming} />
+          ) : (
+            <></>
+          )}
           <div className="h-4"></div>
         </div>
       </div>

frontend/src/components/util/spinner-loading.tsx

@@ -1,7 +1,6 @@
 import { colors } from '@/styles/colors'
 import { HTMLAttributes } from 'react'
-import { SpinnerCircular } from 'spinners-react'
-import { gray } from 'tailwindcss/colors'
+import PuffLoader from 'react-spinners/PuffLoader'
 import { P } from '../lib/typography'
 
 type SpinnerLoadingProps = HTMLAttributes<HTMLDivElement> & {
@@ -13,7 +12,7 @@ export default function SpinnerLoading(props: SpinnerLoadingProps) {
 
   return (
     <div className="flex flex-col justify-center items-center w-full h-[80vh]">
-      <SpinnerCircular color={primary} secondaryColor={gray[200]} />
+      <PuffLoader color={primary} aria-label="Loading Spinner" size={150} loading={true} />
       {props.message && <P className="text-center text-lg font-semibold m-1">{props.message}</P>}
     </div>
   )