Let useQueryParameterState accept custom delay

mui · Mar 15, 2024 · 4246617 · 4246617
1 parent 9b5b900
commit 4246617
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -5,7 +5,6 @@ import copy from 'clipboard-copy';
 import InputBase from '@mui/material/InputBase';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
-import { debounce } from '@mui/material/utils';
 import Grid from '@mui/material/Grid';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
@@ -486,7 +485,7 @@ export default function SearchIcons() {
   const lazyKeys = React.useDeferredValue(keys);
   const [theme, setTheme] = useQueryParameterState('theme', 'All');
   const [selectedIcon, setSelectedIcon] = useQueryParameterState('selected', '');
-  const [query, setQuery] = useQueryParameterState('query', '');
+  const [query, setQuery] = useQueryParameterState('query', '', 0);
   const lazyQuery = React.useDeferredValue(query);
   const [minIcons, setMinIcons] = React.useState(49);
 
@@ -529,8 +528,6 @@ export default function SearchIcons() {
     [theme, lazyKeys],
   );
 
-  const totalNumIcons = icons.length;
-
   const dialogSelectedIcon = useLatest(
     selectedIcon ? allIconsMap[selectedIcon] : null,
   );
@@ -573,20 +570,20 @@ export default function SearchIcons() {
             autoFocus
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder={`Search over ${formatNumber(totalNumIcons)} available icons...`}
+            placeholder={`Search icons...`}
             inputProps={{ 'aria-label': 'search icons' }}
           />
         </Paper>
         <Typography variant="subtitle1" sx={{ mb: 1 }}>
-          {`${formatNumber(totalNumIcons)} matching results`}
+          {`${formatNumber(icons.length)} matching results`}
         </Typography>
         <Stack spacing={4} sx={{ height: '100%' }}>
           <Icons
             icons={icons.slice(0, minIcons)}
             handleOpenClick={handleOpenClick}
-            data={{ total: totalNumIcons, length: minIcons }}
+            data={{ total: icons.length, length: minIcons }}
           />
-          {totalNumIcons > minIcons && (
+          {icons.length > minIcons && (
             <Button
               size="small"
               color="primary"

diff --git a/docs/src/modules/utils/useQueryParameterState.ts b/docs/src/modules/utils/useQueryParameterState.ts
@@ -2,8 +2,6 @@ import * as React from 'react';
 import { useRouter } from 'next/router';
 import { debounce } from '@mui/material/utils';
 
-const QUERY_UPDATE_WAIT_MS = 220;
-
 /**
  * Similar to `React.useState`, but it syncs back the current state to a query
  * parameter in the url, therefore it only supports strings. Wrap the result with
@@ -14,6 +12,7 @@ const QUERY_UPDATE_WAIT_MS = 220;
 export default function useQueryParameterState(
   name: string,
   initialValue = '',
+  waitMs = 220,
 ): [string, (newValue: string) => void] {
   const initialValueRef = React.useRef(initialValue);
 
@@ -50,7 +49,7 @@ export default function useQueryParameterState(
             },
           );
         }
-      }, QUERY_UPDATE_WAIT_MS),
+      }, waitMs),
     [name, router],
   );