feat: add loading to the search dialog

Author: pooriaset

src/app/[locale]/(main)/(homepage)/components/Header.tsx

@@ -5,11 +5,13 @@ import { SearchOutlined } from '@mui/icons-material';
 import { Box, Stack, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 import SearchDialog from './SearchDialog';
 import SearchSection from './SearchSection';
 
 const Header = () => {
+  const [isPending, startTransition] = useTransition();
+
   const { navigate, q } = useCustomSearchParams();
 
   const [open, setOpen] = useState(false);
@@ -19,8 +21,10 @@ const Header = () => {
   };
 
   const onClickOnSearch = (q: string) => {
-    navigate('Q', q);
-    setOpen(false);
+    startTransition(() => {
+      navigate('Q', q);
+      setOpen(false);
+    });
   };
 
   const t = useTranslations();
@@ -31,6 +35,7 @@ const Header = () => {
         <SearchSection
           onClickOnBack={handleToggleDialog}
           onClickOnSearch={onClickOnSearch}
+          isPending={isPending}
         />
       </SearchDialog>
       <Stack direction="row" spacing={1} alignItems="center" height={56}>

src/app/[locale]/(main)/(homepage)/components/MainCategories.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import Image from '@/components/common/Image';
+import { useAppContext } from '@/hooks/useAppContext';
 import { ChevronLeft } from '@mui/icons-material';
 import { Box, Grid, Link, Stack } from '@mui/material';
 import { grey } from '@mui/material/colors';
-import React, { FC } from 'react';
-import Image from '@/components/common/Image';
+import { FC } from 'react';
 
 export interface IMainCategory {
   id: number | string;
@@ -15,19 +16,20 @@ export interface MainCategoriesProps {
   items: IMainCategory[];
 }
 const MainCategories: FC<MainCategoriesProps> = ({ items }) => {
+  const { isMobile } = useAppContext();
   return (
     <Grid container spacing={2}>
       {items.map((item) => {
         const params = new URLSearchParams();
         params.set('categoryId', item.id.toString());
 
         return (
-          <Grid key={item.id} item xs={12} md={3}>
+          <Grid key={item.id} item xs={6} md={3}>
             <Link href={`/search?${params.toString()}`}>
               <Stack spacing={1} alignItems="end">
                 <Box
                   width="100%"
-                  height={210}
+                  height={isMobile ? 150 : 210}
                   sx={{
                     bgcolor: grey[100],
                     borderRadius: 2,

src/app/[locale]/(main)/(homepage)/components/SearchSection.tsx

@@ -1,3 +1,4 @@
+import IconButtonWithLoading from '@/components/common/IconButtonWithLoading';
 import useInputFiller from '@/hooks/useInputFiller';
 import { Locale, languages } from '@/navigation';
 import {
@@ -12,11 +13,13 @@ import { DOMAttributes, FC } from 'react';
 export interface SearchSectionProps {
   onClickOnBack?: IconButtonProps['onClick'];
   onClickOnSearch?: (q: string) => void;
+  isPending?: boolean;
 }
 
 const SearchSection: FC<SearchSectionProps> = ({
   onClickOnBack,
   onClickOnSearch,
+  isPending,
 }) => {
   const { inputRef } = useInputFiller();
 
@@ -47,9 +50,9 @@ const SearchSection: FC<SearchSectionProps> = ({
             </IconButton>
           ),
           endAdornment: (
-            <IconButton type="submit">
+            <IconButtonWithLoading isLoading={isPending} type="submit">
               <SearchOutlined />
-            </IconButton>
+            </IconButtonWithLoading>
           ),
         }}
         fullWidth

src/components/common/IconButtonWithLoading.tsx

@@ -0,0 +1,22 @@
+import { CircularProgress, IconButton, IconButtonProps } from '@mui/material';
+import { FC } from 'react';
+
+export interface IconButtonWithLoadingProps extends IconButtonProps {
+  isLoading?: boolean;
+}
+const IconButtonWithLoading: FC<IconButtonWithLoadingProps> = ({
+  isLoading,
+  ...props
+}) => {
+  return (
+    <IconButton {...props} disabled={isLoading || props.disabled}>
+      {isLoading ? (
+        <CircularProgress color="inherit" size={20} />
+      ) : (
+        props.children
+      )}
+    </IconButton>
+  );
+};
+
+export default IconButtonWithLoading;