perf: search loading experience.

fix: gh-112 search page rerender when typing in slow internet connection.
add search module loading area.

src/components/Document/search.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DocumentList } from '@/src/components/Document/list';
 import { SearchBar } from '@/src/components/Document/searchBar';
 import { useForm } from '@mantine/form';
@@ -7,6 +7,7 @@ import { useMeiliClient } from '@/src/hooks/useMeiliClient';
 import { useCurrentInstance } from '@/src/hooks/useCurrentInstance';
 import { useTranslation } from 'react-i18next';
 import useDebounce from 'ahooks/lib/useDebounce';
+import { Loader } from '../Loader';
 
 const emptySearchResult = {
   hits: [],
@@ -55,23 +56,23 @@ export const SearchPage = ({ currentIndex }: Props) => {
   const debouncedSearchFormValue = useDebounce(searchForm.values, { wait: 450 });
 
   const searchDocumentsQuery = useQuery({
-    queryKey: ['searchDocuments', host, indexClient?.uid, debouncedSearchFormValue],
+    queryKey: ['searchDocuments', host, indexClient?.uid],
     queryFn: async ({ queryKey }) => {
       const {
         q,
         limit,
         offset,
         filter,
         sort = '',
-      } = { ...searchForm.values, ...(queryKey[3] as typeof searchForm.values) };
+      } = { ...searchForm.values, ...(debouncedSearchFormValue as typeof searchForm.values) };
       // prevent app error from request param invalid
       if (searchForm.validate().hasErrors) return emptySearchResult;
 
       // search sorting expression
       const sortExpressions: string[] =
         (sort.match(/(([\w\.]+)|(_geoPoint\([\d\.,\s]+\))){1}\:((asc)|(desc))/g) as string[]) || [];
 
-      console.log('search sorting expression', sort, sortExpressions);
+      console.debug('search sorting expression', sort, sortExpressions);
 
       try {
         const data = await indexClient!.search(q, {
@@ -104,6 +105,13 @@ export const SearchPage = ({ currentIndex }: Props) => {
     await searchDocumentsQuery.refetch();
   }, [searchDocumentsQuery]);
 
+  // use this to refresh search when typing, DO NOT use useQuery dependencies (will cause unknown rerender error).
+  useEffect(() => {
+    searchDocumentsQuery.refetch();
+    // prevent infinite recursion rerender.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearchFormValue]);
+
   return useMemo(
     () => (
       <div className={`h-full flex flex-col p-6 gap-4 overflow-hidden`}>
@@ -127,14 +135,20 @@ export const SearchPage = ({ currentIndex }: Props) => {
         </div>
         {/* Doc List */}
         <div className={`flex-1 flex flex-col gap-4 overflow-scroll`}>
-          <DocumentList
-            docs={searchDocumentsQuery.data?.hits.map((i) => ({
-              indexId: currentIndex,
-              content: i,
-              primaryKey: indexPrimaryKeyQuery.data!,
-            }))}
-            refetchDocs={searchDocumentsQuery.refetch}
-          />
+          {searchDocumentsQuery.isFetching ? (
+            <div className={`flex-1 flex justify-center items-center`}>
+              <Loader size={'md'} />
+            </div>
+          ) : (
+            <DocumentList
+              docs={searchDocumentsQuery.data?.hits.map((i) => ({
+                indexId: currentIndex,
+                content: i,
+                primaryKey: indexPrimaryKeyQuery.data!,
+              }))}
+              refetchDocs={searchDocumentsQuery.refetch}
+            />
+          )}
         </div>
       </div>
     ),

src/components/Document/searchForm.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Loader, NumberInput, TextInput, Tooltip } from '@mantine/core';
+import { NumberInput, TextInput, Tooltip } from '@mantine/core';
 import { IconAlignBoxLeftMiddle, IconArrowsSort, IconFilter, IconSearch } from '@tabler/icons-react';
 import clsx from 'clsx';
 import { UseFormReturnType } from '@mantine/form';
@@ -98,8 +98,6 @@ export const SearchForm = ({
 
           {/* right btn group */}
           <div className={`ml-auto mt-auto flex gap-x-4 items-center`}>
-            {isFetching && <Loader color="gray" size="sm" />}
-
             {/* submit btn */}
             <button type={'submit'} className={`btn solid primary bg-gradient-to-br from-[#c84e89] to-[#F15F79]`}>
               {submitBtnText}
@@ -108,6 +106,6 @@ export const SearchForm = ({
         </div>
       </form>
     ),
-    [indexIdEnable, isFetching, onFormSubmit, t, searchForm, searchFormError, submitBtnText]
+    [indexIdEnable, onFormSubmit, t, searchForm, searchFormError, submitBtnText]
   );
 };

src/components/lazy.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { FC, ReactNode, Suspense } from 'react';
+import clsx from 'clsx';
+import { Loader } from './Loader';
+interface Props {
+  className?: string;
+  children: ReactNode;
+}
+
+export const Lazy: FC<Props> = ({ className = '', children }) => {
+  return (
+    <Suspense
+      fallback={
+        <div className={clsx(`flex-1 flex justify-center items-center`, className)}>
+          <Loader size={'md'} />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+};

src/routes/index.tsx

@@ -14,6 +14,7 @@ import { EmptyArea } from '../components/EmptyArea';
 import { UploadDoc } from '../pages/index/upload';
 import { MultiIndexSearch } from '../pages/index/multi-search';
 import { useTranslation } from 'react-i18next';
+import { Lazy } from '../components/lazy';
 
 export const AppRoutes = () => {
   const { t } = useTranslation();
@@ -33,7 +34,14 @@ export const AppRoutes = () => {
               <Route index element={<EmptyArea text={t('document:empty_area_tip')} />} />
               <Route path="create" element={<CreateIndex />} />
               <Route path=":indexId">
-                <Route index element={<Documents />} />
+                <Route
+                  index
+                  element={
+                    <Lazy className={`h-full`}>
+                      <Documents />
+                    </Lazy>
+                  }
+                />
                 <Route path="settings" element={<Settings />} />
                 <Route path="upload" element={<UploadDoc />} />
               </Route>