@scrabble-solver/scrabble-solver 2.13.9 → 2.13.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.9",
+  "version": "2.13.10",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
     "@floating-ui/react": "^0.26.17",
     "@kamilmielnik/trie": "^3.0.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.9",
-    "@scrabble-solver/constants": "^2.13.9",
-    "@scrabble-solver/dictionaries": "^2.13.9",
-    "@scrabble-solver/logger": "^2.13.9",
-    "@scrabble-solver/solver": "^2.13.9",
-    "@scrabble-solver/types": "^2.13.9",
-    "@scrabble-solver/word-definitions": "^2.13.9",
+    "@scrabble-solver/configs": "^2.13.10",
+    "@scrabble-solver/constants": "^2.13.10",
+    "@scrabble-solver/dictionaries": "^2.13.10",
+    "@scrabble-solver/logger": "^2.13.10",
+    "@scrabble-solver/solver": "^2.13.10",
+    "@scrabble-solver/types": "^2.13.10",
+    "@scrabble-solver/word-definitions": "^2.13.10",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
@@ -52,6 +52,7 @@
     "react-window": "^1.8.10",
     "redux-saga": "^1.3.0",
     "store2": "^2.14.3",
+    "use-debounce": "^10.0.1",
     "workbox-expiration": "^7.1.0",
     "workbox-precaching": "^7.1.0",
     "workbox-routing": "^7.1.0",
@@ -72,5 +73,5 @@
     "@types/redux-saga": "^0.10.5",
     "sass": "^1.77.5"
   },
-  "gitHead": "d09676296f8fafadb7da0cf1e11fb240aaf309ee"
+  "gitHead": "ebc7207c650ab1fdbb0bca3df53a445eaa6de268"
 }

package/src/components/Results/Results.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { FixedSizeList } from 'react-window';
+import { useDebounce } from 'use-debounce';
 
 import { useAppLayout, useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
@@ -32,6 +33,8 @@ interface Props {
   highlightedIndex?: number;
 }
 
+const IS_LOADING_DEBOUNCE = 100;
+
 const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
   const { resultsHeight, resultsWidth } = useAppLayout();
@@ -39,6 +42,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const { direction } = LOCALE_FEATURES[locale];
   const results = useTypedSelector(selectResults);
   const isLoading = useTypedSelector(selectIsLoading);
+  const [isLoadingDebounced] = useDebounce(isLoading, IS_LOADING_DEBOUNCE);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
@@ -128,7 +132,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
 
       {showInput && <ResultsInput className={styles.input} />}
 
-      {isLoading && <Loading />}
+      {isLoadingDebounced && <Loading />}
     </div>
   );
 };

package/src/lib/groupResults.ts

@@ -1,15 +1,10 @@
 import { Result } from '@scrabble-solver/types';
 
-import { CellFilterEntry } from 'types';
+import { CellFilterEntry, GroupedResults } from 'types';
 
 import createRegExp from './createRegExp';
 import resultMatchesCellFilter from './resultMatchesCellFilter';
 
-interface GroupedResults {
-  matching: Result[];
-  other: Result[];
-}
-
 const groupResults = (
   results: Result[] | undefined,
   query: string,
@@ -21,7 +16,7 @@ const groupResults = (
 
   const regExp = createRegExp(query);
 
-  return results.reduce<GroupedResults>(
+  const { matching, other } = results.reduce<GroupedResults>(
     (groupedResults, result) => {
       const matchesQuery = () => regExp.test(result.word);
 
@@ -35,6 +30,8 @@ const groupResults = (
     },
     { matching: [], other: [] },
   );
+
+  return { matching, other };
 };
 
 export default groupResults;

package/src/lib/index.ts

@@ -34,6 +34,7 @@ export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';
 export { default as resultMatchesCellFilter } from './resultMatchesCellFilter';
 export { default as reverseComparator } from './reverseComparator';
+export { default as sortGroupedResults } from './sortGroupedResults';
 export { default as sortResults } from './sortResults';
 export { default as unorderedArraysEqual } from './unorderedArraysEqual';
 export { default as zipCharactersAndTiles } from './zipCharactersAndTiles';

package/src/lib/sortGroupedResults.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+import { GroupedResults, Sort } from 'types';
+
+import sortResults from './sortResults';
+
+const sortGroupedResults = (
+  results: GroupedResults | undefined,
+  sort: Sort,
+  locale: Locale,
+): GroupedResults | undefined => {
+  if (typeof results === 'undefined') {
+    return results;
+  }
+
+  return {
+    matching: sortResults(results.matching, sort, locale) ?? [],
+    other: sortResults(results.other, sort, locale) ?? [],
+  };
+};
+
+export default sortGroupedResults;

package/src/state/selectors.ts

@@ -13,7 +13,7 @@ import {
   getRemainingTilesGroups,
   groupResults,
   resultMatchesCellFilter,
-  sortResults,
+  sortGroupedResults,
   unorderedArraysEqual,
 } from 'lib';
 import { Point, Translations } from 'types';
@@ -94,14 +94,17 @@ export const selectResultsQuery = createSelector([selectResultsRoot], (results)
 
 export const selectResultsSort = createSelector([selectResultsRoot], (results) => results.sort);
 
-export const selectSortedResults = createSelector([selectResultsRaw, selectResultsSort, selectLocale], sortResults);
-
 export const selectGroupedResults = createSelector(
-  [selectSortedResults, selectResultsQuery, selectFilteredCells],
+  [selectResultsRaw, selectResultsQuery, selectFilteredCells],
   groupResults,
 );
 
-export const selectResults = createSelector([selectGroupedResults], (groupedResults) => {
+export const selectGroupedSortedResults = createSelector(
+  [selectGroupedResults, selectResultsSort, selectLocale],
+  sortGroupedResults,
+);
+
+export const selectResults = createSelector([selectGroupedSortedResults], (groupedResults) => {
   return groupedResults ? [...groupedResults.matching, ...groupedResults.other] : groupedResults;
 });
 

package/src/types/index.ts

@@ -1,3 +1,5 @@
+import { Result } from '@scrabble-solver/types';
+
 export type Comparator<T> = (a: T, B: T) => number;
 
 export type AutoGroupTiles = 'left' | 'right' | null;
@@ -55,6 +57,12 @@ export enum ResultColumn {
   Word = 'word',
   WordsCount = 'words-count',
 }
+
+export interface GroupedResults {
+  matching: Result[];
+  other: Result[];
+}
+
 export type TranslationKey =
   | 'cell.enter-word'
   | 'cell.filter-cell.exclude'