1
1
import { type PropsWithChildren , type ReactNode , useState } from "react" ;
2
+ import { useTheme } from "@emotion/react" ;
2
3
import { Language } from "./WorkspacesPageView" ;
3
-
4
- import { UseQueryResult } from "@tanstack/react-query" ;
5
4
import { type Template } from "api/typesGenerated" ;
6
5
7
6
import { Link as RouterLink } from "react-router-dom" ;
@@ -21,7 +20,6 @@ import {
21
20
PopoverContainer ,
22
21
PopoverLink ,
23
22
} from "components/PopoverContainer/PopoverContainer" ;
24
- import { useTheme } from "@emotion/react" ;
25
23
26
24
const ICON_SIZE = 18 ;
27
25
const COLUMN_GAP = 1.5 ;
@@ -113,25 +111,24 @@ function WorkspaceResultsRow({ template }: { template: Template }) {
113
111
}
114
112
115
113
type WorkspacesButtonProps = PropsWithChildren < {
116
- templatesQuery : UseQueryResult < Template [ ] > ;
114
+ isLoadingTemplates : boolean ;
115
+ templates : readonly Template [ ] ;
117
116
} > ;
118
117
119
118
export function WorkspacesButton ( {
120
119
children,
121
- templatesQuery,
120
+ isLoadingTemplates,
121
+ templates,
122
122
} : WorkspacesButtonProps ) {
123
123
const theme = useTheme ( ) ;
124
124
125
125
// Dataset should always be small enough that client-side filtering should be
126
126
// good enough. Can swap out down the line if it becomes an issue
127
127
const [ searchTerm , setSearchTerm ] = useState ( "" ) ;
128
- const processed = sortTemplatesByUsersDesc (
129
- templatesQuery . data ?? [ ] ,
130
- searchTerm ,
131
- ) ;
128
+ const processed = sortTemplatesByUsersDesc ( templates , searchTerm ) ;
132
129
133
130
let emptyState : ReactNode = undefined ;
134
- if ( templatesQuery . data ? .length === 0 ) {
131
+ if ( templates . length === 0 ) {
135
132
emptyState = (
136
133
< EmptyState
137
134
message = "No templates yet"
@@ -175,7 +172,7 @@ export function WorkspacesButton({
175
172
paddingY : 1 ,
176
173
} }
177
174
>
178
- { status === "loading" ? (
175
+ { isLoadingTemplates ? (
179
176
< Loader size = { 14 } />
180
177
) : (
181
178
< >
0 commit comments