Skip to content

Commit c44c92a

Browse files
pauldambrapauldambra
authored
feat: show a spinner when searching taxonomy (#33190)
1 parent 7c94b9c commit c44c92a

File tree

1 file changed

+65
-65
lines changed

1 file changed

+65
-65
lines changed

‎frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,13 @@ function CategoryPill({
3636
}): JSX.Element {
3737
const logic = infiniteListLogic({ ...taxonomicFilterLogicProps, listGroupType: groupType })
3838
const { taxonomicGroups } = useValues(taxonomicFilterLogic)
39-
const { totalResultCount, totalListCount, isLoading, results, hasRemoteDataSource } = useValues(logic)
39+
const { totalResultCount, totalListCount, isLoading, hasRemoteDataSource } = useValues(logic)
4040

4141
const group = taxonomicGroups.find((g) => g.type === groupType)
4242

4343
// :TRICKY: use `totalListCount` (results + extra) to toggle interactivity, while showing `totalResultCount`
4444
const canInteract = totalListCount > 0 || taxonomicFilterGroupTypesWithEmptyStates.includes(groupType)
45-
const hasOnlyDefaultItems = results?.length === 1 && (!results[0].id || results[0].id === '')
46-
const showLoading = isLoading && (!results || results.length === 0 || hasOnlyDefaultItems) && hasRemoteDataSource
45+
const showLoading = isLoading && hasRemoteDataSource
4746

4847
return (
4948
<LemonTag
@@ -76,71 +75,72 @@ function TaxonomicGroupTitle({ openTab }: { openTab: TaxonomicFilterGroupType })
7675
const { eventOrdering } = useValues(taxonomicFilterPreferencesLogic)
7776
const { setEventOrdering } = useActions(taxonomicFilterPreferencesLogic)
7877

79-
if (openTab === TaxonomicFilterGroupType.Events) {
80-
const currentGroup = taxonomicGroups.find((g) => g.type === openTab)
81-
82-
return (
83-
<div className="flex flex-row justify-between items-center w-full">
84-
<span>{currentGroup?.name || openTab}</span>
85-
<FlaggedFeature flag="taxonomic-event-sorting" match={true}>
86-
<LemonMenu
87-
items={[
88-
{
89-
label: (
90-
<div className="flex flex-row gap-2">
91-
{eventOrdering === 'name' ? <IconCheck /> : <IconBlank />}
92-
<span>Name</span>
93-
</div>
94-
),
95-
tooltip: 'Sort events alphabetically',
96-
onClick: () => {
97-
setEventOrdering('name')
78+
return (
79+
<div className="flex flex-row justify-between items-center w-full relative">
80+
{openTab === TaxonomicFilterGroupType.Events ? (
81+
<>
82+
<span>{taxonomicGroups.find((g) => g.type === openTab)?.name || openTab}</span>
83+
<FlaggedFeature flag="taxonomic-event-sorting" match={true}>
84+
<LemonMenu
85+
items={[
86+
{
87+
label: (
88+
<div className="flex flex-row gap-2">
89+
{eventOrdering === 'name' ? <IconCheck /> : <IconBlank />}
90+
<span>Name</span>
91+
</div>
92+
),
93+
tooltip: 'Sort events alphabetically',
94+
onClick: () => {
95+
setEventOrdering('name')
96+
},
9897
},
99-
},
100-
{
101-
label: (
102-
<div className="flex flex-row gap-2">
103-
{eventOrdering === '-last_seen_at' ? <IconCheck /> : <IconBlank />}
104-
<span>Recently seen</span>
105-
</div>
106-
),
107-
tooltip: 'Show the most recent events first',
108-
onClick: () => {
109-
setEventOrdering('-last_seen_at')
98+
{
99+
label: (
100+
<div className="flex flex-row gap-2">
101+
{eventOrdering === '-last_seen_at' ? <IconCheck /> : <IconBlank />}
102+
<span>Recently seen</span>
103+
</div>
104+
),
105+
tooltip: 'Show the most recent events first',
106+
onClick: () => {
107+
setEventOrdering('-last_seen_at')
108+
},
110109
},
111-
},
112-
{
113-
label: (
114-
<div className="flex flex-row gap-2">
115-
{!eventOrdering ? <IconCheck /> : <IconBlank />}
116-
<span>Both</span>
117-
</div>
118-
),
119-
tooltip:
120-
'Sorts events by the day they were last seen, and then by name. The default option.',
121-
onClick: () => {
122-
setEventOrdering(null)
110+
{
111+
label: (
112+
<div className="flex flex-row gap-2">
113+
{!eventOrdering ? <IconCheck /> : <IconBlank />}
114+
<span>Both</span>
115+
</div>
116+
),
117+
tooltip:
118+
'Sorts events by the day they were last seen, and then by name. The default option.',
119+
onClick: () => {
120+
setEventOrdering(null)
121+
},
123122
},
124-
},
125-
]}
126-
>
127-
<LemonButton
128-
icon={<IconSort />}
129-
size="small"
130-
tooltip={`Sorting by ${
131-
eventOrdering === '-last_seen_at'
132-
? 'recently seen'
133-
: eventOrdering === 'name'
134-
? 'name'
135-
: 'recently seen and then name'
136-
}`}
137-
/>
138-
</LemonMenu>
139-
</FlaggedFeature>
140-
</div>
141-
)
142-
}
143-
return <>{taxonomicGroups.find((g) => g.type === openTab)?.name || openTab}</>
123+
]}
124+
>
125+
<LemonButton
126+
icon={<IconSort />}
127+
size="small"
128+
tooltip={`Sorting by ${
129+
eventOrdering === '-last_seen_at'
130+
? 'recently seen'
131+
: eventOrdering === 'name'
132+
? 'name'
133+
: 'recently seen and then name'
134+
}`}
135+
/>
136+
</LemonMenu>
137+
</FlaggedFeature>
138+
</>
139+
) : (
140+
<>{taxonomicGroups.find((g) => g.type === openTab)?.name || openTab}</>
141+
)}
142+
</div>
143+
)
144144
}
145145

146146
export function InfiniteSelectResults({

0 commit comments

Comments
 (0)