Merge pull request #120 from dotkom/feat/debounce-search

feat(search): add debounce to search when searching for a course

.lighthouserc.js

@@ -26,6 +26,9 @@ module.exports = {
         'first-cpu-idle': ['warning', { minScore: 0.7 }], // Ouff performance
         'legacy-javascript': 'off', // Maybe Google Analytics?
         'uses-rel-preload': 'off', // Maybe fixable?
+        'uses-rel-preconnect': 'off',
+        'mainthread-work-breakdown': 'off',
+        'max-potential-fid': 'off',
         'unused-javascript': 'off', // Maybe fixable?
         'works-offline': 'off', // Enable for PWA
         'offline-start-url': 'off', // Enable for PWA

common/hooks/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = <T>(value: T, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

pages/course/index.tsx

@@ -10,6 +10,7 @@ import { Course, CourseSort, COURSE_ORDERING } from 'models/Course';
 import { GetStaticProps } from 'next';
 import { Department } from 'models/Department';
 import { Faculty } from 'models/Faculty';
+import useDebounce from 'common/hooks/useDebounce';
 
 interface StaticProps {
   departments: Department[];
@@ -44,8 +45,9 @@ const CourseListPage: FC<StaticProps> = ({ departments, faculties }) => {
   const [departmentId, setDepartmentId] = useState<number | null>(null);
   const [facultyId, setFacultyId] = useState<number | null>(null);
   const query = Array.isArray(queryParam) ? queryParam.join(',') : queryParam;
-  const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(query, sortOrder, departmentId, facultyId), [
-    query,
+  const debouncedQuery = useDebounce(query, 200);
+  const getSearchUrl = useMemo(() => getSearchUrlPaginatedGetter(debouncedQuery, sortOrder, departmentId, facultyId), [
+    debouncedQuery,
     sortOrder,
     departmentId,
     facultyId,