[portal][feat] pass isLoading states to typeahead components

apps/portal/src/components/questions/typeahead/CompanyTypeahead.tsx

@@ -13,7 +13,7 @@ export type CompanyTypeaheadProps = Omit<
 export default function CompanyTypeahead(props: CompanyTypeaheadProps) {
   const [query, setQuery] = useState('');
 
-  const { data: companies } = trpc.useQuery([
+  const { data: companies, isLoading } = trpc.useQuery([
     'companies.list',
     {
       name: query,
@@ -33,6 +33,7 @@ export default function CompanyTypeahead(props: CompanyTypeaheadProps) {
   return (
     <ExpandedTypeahead
       {...(props as ExpandedTypeaheadProps)}
+      isLoading={isLoading}
       label="Company"
       options={companyOptions}
       onQueryChange={setQuery}

apps/portal/src/components/questions/typeahead/LocationTypeahead.tsx

@@ -23,7 +23,7 @@ export default function LocationTypeahead({
 }: LocationTypeaheadProps) {
   const [query, setQuery] = useState('');
 
-  const { data: locations } = trpc.useQuery([
+  const { data: locations, isLoading } = trpc.useQuery([
     'locations.cities.list',
     {
       name: query,
@@ -45,6 +45,7 @@ export default function LocationTypeahead({
 
   return (
     <ExpandedTypeahead
+      isLoading={isLoading}
       {...({
         onSuggestionClick: onSuggestionClick
           ? (option: TypeaheadOption) => {

apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx

@@ -26,7 +26,9 @@ export default function RoleTypeahead(props: RoleTypeaheadProps) {
       {...(props as ExpandedTypeaheadProps)}
       label="Role"
       options={ROLES.filter((option) =>
-        option.label.toLowerCase().includes(query.toLowerCase()),
+        option.label
+          .toLocaleLowerCase()
+          .includes(query.trim().toLocaleLowerCase()),
       )}
       onQueryChange={setQuery}
     />

apps/portal/src/components/shared/CitiesTypeahead.tsx

@@ -36,10 +36,11 @@ export default function CitiesTypeahead({
     },
   ]);
 
-  const { data } = cities;
+  const { data, isLoading } = cities;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label={label}
       minQueryLength={3}
       noResultsMessage="No cities found"

apps/portal/src/components/shared/CompaniesTypeahead.tsx

@@ -34,10 +34,11 @@ export default function CompaniesTypeahead({
     },
   ]);
 
-  const { data } = companies;
+  const { data, isLoading } = companies;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}

apps/portal/src/components/shared/CountriesTypeahead.tsx

@@ -48,10 +48,11 @@ export default function CountriesTypeahead({
     },
   ]);
 
-  const { data } = countries;
+  const { data, isLoading } = countries;
 
   return (
     <Typeahead
+      isLoading={isLoading}
       label={label}
       noResultsMessage="No countries found"
       nullable={true}

apps/portal/src/components/shared/JobTitlesTypeahead.tsx

@@ -35,9 +35,8 @@ export default function JobTitlesTypeahead({
       value: slug,
     }))
     .sort((a, b) => b.ranking - a.ranking)
-    .filter(
+    .filter(({ label }) =>
-      ({ label }) =>
+      label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),
-        label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1,
     );
 
   return (