feat(web): Generic List - UX improvements (#15983)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Sep 13, 2024 · 5543763 · 5543763
1 parent f9c2668
commit 5543763
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 41 deletions.
diff --git a/apps/web/components/GenericList/GenericList.css.ts b/apps/web/components/GenericList/GenericList.css.ts
@@ -3,3 +3,7 @@ import { style } from '@vanilla-extract/css'
 export const clickableItemTopRowContainer = style({
   minHeight: '30px',
 })
+
+export const filterTagsContainer = style({
+  minHeight: '32px',
+})
diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
@@ -332,6 +332,7 @@ export const GenericList = ({
                     variant={isMobile ? 'dialog' : 'popover'}
                     onFilterClear={() => {
                       setParameters(null)
+                      setPage(null)
                     }}
                     filterInput={filterInputComponent}
                   >
@@ -342,6 +343,7 @@ export const GenericList = ({
                           : 'Clear selection'
                       }
                       onChange={({ categoryId, selected }) => {
+                        setPage(null)
                         setParameters((prevParameters) => {
                           // Make sure we clear out the query params from the url when there is nothing selected
                           if (
@@ -361,6 +363,7 @@ export const GenericList = ({
                         })
                       }}
                       onClear={(categoryId) => {
+                        setPage(null)
                         setParameters((prevParameters) => {
                           const updatedParameters = {
                             ...prevParameters,
@@ -384,43 +387,45 @@ export const GenericList = ({
                   </Filter>
                 </Stack>
 
-                <Inline space={1} alignY="top">
-                  {selectedFilters.length > 0 && (
-                    <Text>
-                      {activeLocale === 'is' ? 'Síað eftir:' : 'Filtered by:'}
-                    </Text>
-                  )}
-                  <Inline space={1}>
-                    {selectedFilters.map(({ value, label, category }) => (
-                      <FilterTag
-                        key={value}
-                        onClick={() => {
-                          setParameters((prevParameters) => {
-                            const updatedParameters = {
-                              ...prevParameters,
-                              [category]: (
-                                prevParameters?.[category] ?? []
-                              ).filter((prevValue) => prevValue !== value),
-                            }
-
-                            // Make sure we clear out the query params from the url when there is nothing selected
-                            if (
-                              Object.values(updatedParameters).every(
-                                (s) => !s || s.length === 0,
-                              )
-                            ) {
-                              return null
-                            }
-
-                            return updatedParameters
-                          })
-                        }}
-                      >
-                        {label}
-                      </FilterTag>
-                    ))}
+                <Box className={styles.filterTagsContainer}>
+                  <Inline space={1} alignY="top">
+                    {selectedFilters.length > 0 && (
+                      <Text>
+                        {activeLocale === 'is' ? 'Síað eftir:' : 'Filtered by:'}
+                      </Text>
+                    )}
+                    <Inline space={1}>
+                      {selectedFilters.map(({ value, label, category }) => (
+                        <FilterTag
+                          key={value}
+                          onClick={() => {
+                            setParameters((prevParameters) => {
+                              const updatedParameters = {
+                                ...prevParameters,
+                                [category]: (
+                                  prevParameters?.[category] ?? []
+                                ).filter((prevValue) => prevValue !== value),
+                              }
+
+                              // Make sure we clear out the query params from the url when there is nothing selected
+                              if (
+                                Object.values(updatedParameters).every(
+                                  (s) => !s || s.length === 0,
+                                )
+                              ) {
+                                return null
+                              }
+
+                              return updatedParameters
+                            })
+                          }}
+                        >
+                          {label}
+                        </FilterTag>
+                      ))}
+                    </Inline>
                   </Inline>
-                </Inline>
+                </Box>
               </Stack>
             )}
             {filterCategories.length === 0 && filterInputComponent}
@@ -436,7 +441,7 @@ export const GenericList = ({
               }
             />
           )}
-          {totalItems === 0 && !displayError && (
+          {totalItems === 0 && !displayError && !loading && (
             <Text>{noResultsFoundText}</Text>
           )}
           {totalItems > 0 && (
@@ -511,7 +516,7 @@ export const GenericListWrapper = ({
     useState<GenericListItemResponse | null>(null)
   const [errorOccurred, setErrorOccurred] = useState(false)
 
-  const [fetchListItems, { loading }] = useLazyQuery<
+  const [fetchListItems, { loading, called }] = useLazyQuery<
     Query,
     GetGenericListItemsQueryVariables
   >(GET_GENERIC_LIST_ITEMS_QUERY, {
@@ -567,7 +572,7 @@ export const GenericListWrapper = ({
         })
       }}
       totalItems={totalItems}
-      loading={loading}
+      loading={loading || !called}
       pageQueryId={pageQueryId}
       searchQueryId={searchQueryId}
       tagQueryId={tagQueryId}

diff --git a/apps/web/components/Organization/Slice/TeamListSlice/TeamListSlice.tsx b/apps/web/components/Organization/Slice/TeamListSlice/TeamListSlice.tsx
@@ -34,7 +34,7 @@ export const TeamMemberListWrapper = ({
   )
   const [errorOccurred, setErrorOccurred] = useState(false)
 
-  const [fetchListItems, { loading }] = useLazyQuery<Query>(
+  const [fetchListItems, { loading, called }] = useLazyQuery<Query>(
     GET_TEAM_MEMBERS_QUERY,
     {
       onCompleted(data) {
@@ -89,7 +89,7 @@ export const TeamMemberListWrapper = ({
         })
       }}
       totalItems={totalItems}
-      loading={loading}
+      loading={loading || !called}
       pageQueryId={pageQueryId}
       searchQueryId={searchQueryId}
       tagQueryId={tagQueryId}