fix(inventory): fix badly implemented transition

src/locales/de-DE/messages.po

@@ -272,7 +272,7 @@ msgstr ""
 msgid "Account: {0}"
 msgstr "Konto: {0}"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:248
+#: src/pages/panel/inventory/InventoryPage.tsx:264
 msgid "accounts"
 msgstr ""
 
@@ -397,7 +397,7 @@ msgstr ""
 msgid "All checks have been disabled for this resource"
 msgstr "Für diese Ressource wurden alle Prüfungen deaktiviert"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:75
+#: src/pages/panel/inventory/InventoryPage.tsx:91
 msgid "All resource kinds"
 msgstr ""
 
@@ -793,7 +793,7 @@ msgstr ""
 msgid "Cloud Inventory"
 msgstr "Cloud Inventar"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:247
+#: src/pages/panel/inventory/InventoryPage.tsx:263
 msgid "clouds"
 msgstr ""
 
@@ -1583,7 +1583,7 @@ msgstr ""
 msgid "Invalid Value"
 msgstr "Ungültiger Wert"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:204
+#: src/pages/panel/inventory/InventoryPage.tsx:220
 #: src/shared/layouts/panel-layout/menuList.tsx:34
 msgid "Inventory"
 msgstr "Inventar"
@@ -1612,7 +1612,7 @@ msgstr ""
 msgid "Kind"
 msgstr "Art"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:250
+#: src/pages/panel/inventory/InventoryPage.tsx:266
 msgid "kinds"
 msgstr ""
 
@@ -2238,7 +2238,7 @@ msgstr "Regenerieren"
 msgid "Region"
 msgstr "Region"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:249
+#: src/pages/panel/inventory/InventoryPage.tsx:265
 msgid "regions"
 msgstr ""
 

src/locales/en-US/messages.po

@@ -272,7 +272,7 @@ msgstr "Account usage"
 msgid "Account: {0}"
 msgstr "Account: {0}"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:248
+#: src/pages/panel/inventory/InventoryPage.tsx:264
 msgid "accounts"
 msgstr "accounts"
 
@@ -397,7 +397,7 @@ msgstr "All changes over all resources."
 msgid "All checks have been disabled for this resource"
 msgstr "All checks have been disabled for this resource"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:75
+#: src/pages/panel/inventory/InventoryPage.tsx:91
 msgid "All resource kinds"
 msgstr "All resource kinds"
 
@@ -793,7 +793,7 @@ msgstr "Cloud Accounts"
 msgid "Cloud Inventory"
 msgstr "Cloud Inventory"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:247
+#: src/pages/panel/inventory/InventoryPage.tsx:263
 msgid "clouds"
 msgstr "clouds"
 
@@ -1583,7 +1583,7 @@ msgstr "Invalid file, Please follow the step-by-step instructions {0}."
 msgid "Invalid Value"
 msgstr "Invalid Value"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:204
+#: src/pages/panel/inventory/InventoryPage.tsx:220
 #: src/shared/layouts/panel-layout/menuList.tsx:34
 msgid "Inventory"
 msgstr "Inventory"
@@ -1612,7 +1612,7 @@ msgstr "kind"
 msgid "Kind"
 msgstr "Kind"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:250
+#: src/pages/panel/inventory/InventoryPage.tsx:266
 msgid "kinds"
 msgstr "kinds"
 
@@ -2238,7 +2238,7 @@ msgstr "Regenerate"
 msgid "Region"
 msgstr "Region"
 
-#: src/pages/panel/inventory/InventoryPage.tsx:249
+#: src/pages/panel/inventory/InventoryPage.tsx:265
 msgid "regions"
 msgstr "regions"
 

src/pages/panel/inventory/GridFilterItem.tsx

@@ -58,9 +58,9 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri
     setValues(orgValues)
   }, [orgValues])
   const handleClose = () => {
+    setOpen(null)
     setValues(orgValues)
     setSearch('')
-    setOpen(null)
   }
   const lowerCaseSearch = search.toLowerCase()
   return (
@@ -138,8 +138,8 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri
             <Link
               sx={{ cursor: 'pointer' }}
               onClick={() => {
-                onChange([])
                 setSearch('')
+                onChange([])
               }}
             >
               <Typography variant="buttonSmall" color="textSecondary" fontWeight={500}>
@@ -180,9 +180,9 @@ export const GridFilterItem = ({ name, items, onChange, values: orgValues }: Gri
             variant="contained"
             fullWidth
             onClick={() => {
-              onChange(values)
-              setSearch('')
               setOpen(null)
+              setSearch('')
+              onChange(values)
             }}
           >
             <Trans>Apply filters</Trans>

src/pages/panel/inventory/InventoryPage.tsx

@@ -2,11 +2,12 @@ import { t, Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Box, ButtonBase, Divider, Stack, Typography } from '@mui/material'
 import { useSuspenseQueries } from '@tanstack/react-query'
-import { ReactNode, useMemo, useState } from 'react'
+import { Dispatch, ReactNode, SetStateAction, useCallback, useMemo, useState, useTransition } from 'react'
 import { getNameAndIconFromMetadataGroup, StacksIcon } from 'src/assets/icons'
 import { useUserProfile } from 'src/core/auth'
 import { getWorkspaceInventoryModelQuery, postWorkspaceInventoryDescendantSummaryQuery } from 'src/pages/panel/shared/queries'
 import { CloudToIcon } from 'src/shared/cloud-avatar'
+import { LoadingSuspenseFallback } from 'src/shared/loading'
 import { HelpSlider } from 'src/shared/right-slider'
 import { ResourceComplexKind } from 'src/shared/types/server-shared'
 import { getAccountCloudName } from 'src/shared/utils/getAccountCloudName'
@@ -21,13 +22,28 @@ const getString = (str?: null | string | string[]) => {
   return typeof str === 'string' && str ? str : null
 }
 
+function useTransitionState<StateType>(
+  initialState: StateType | (() => StateType),
+): [StateType, Dispatch<SetStateAction<StateType>>, boolean] {
+  const [state, setState] = useState(initialState)
+  const [isPending, startTransition] = useTransition()
+  const handleSetState = useCallback<Dispatch<SetStateAction<StateType>>>((arg) => startTransition(() => setState(arg)), [])
+  return [state, handleSetState, isPending]
+}
+
 export default function InventoryPage() {
   const { selectedWorkspace } = useUserProfile()
-  const [cloudFilter, setCloudFilter] = useState<string[]>([])
-  const [accountFilter, setAccountFilter] = useState<string[]>([])
-  const [regionFilter, setRegionFilter] = useState<string[]>([])
-  const [kindFilter, setKindFilter] = useState<string[]>([])
-  const [groupFilter, setGroupFilter] = useState('')
+  const [cloudFilter, setCloudFilter, isCloudFilterChangePending] = useTransitionState<string[]>([])
+  const [accountFilter, setAccountFilter, isAccountFilterChangePending] = useTransitionState<string[]>([])
+  const [regionFilter, setRegionFilter, isRegionFilterChangePending] = useTransitionState<string[]>([])
+  const [kindFilter, setKindFilter, isKindFilterChangePending] = useTransitionState<string[]>([])
+  const [groupFilter, setGroupFilter, isGroupFilterChangePending] = useTransitionState('')
+  const pendingTransition =
+    isCloudFilterChangePending ||
+    isAccountFilterChangePending ||
+    isRegionFilterChangePending ||
+    isKindFilterChangePending ||
+    isGroupFilterChangePending
   const {
     i18n: { locale },
   } = useLingui()
@@ -265,19 +281,23 @@ export default function InventoryPage() {
           </Stack>
         </Stack>
         <Box height="100%" flex={1}>
-          <StyledDataGrid
-            disableRowSelectionOnClick
-            columns={columns}
-            rows={rows}
-            pagination
-            autoPageSize
-            rowHeight={62}
-            disableAggregation
-            disableRowGrouping
-            disableColumnFilter
-            columnHeaderHeight={48}
-            slots={{ pagination: DataGridPagination }}
-          />
+          {pendingTransition ? (
+            <LoadingSuspenseFallback />
+          ) : (
+            <StyledDataGrid
+              disableRowSelectionOnClick
+              columns={columns}
+              rows={rows}
+              pagination
+              autoPageSize
+              rowHeight={62}
+              disableAggregation
+              disableRowGrouping
+              disableColumnFilter
+              columnHeaderHeight={48}
+              slots={{ pagination: DataGridPagination }}
+            />
+          )}
         </Box>
       </Stack>
     </Stack>