Skip to content

Animate refresh button #2161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
david-crespo merged 4 commits into from
Apr 17, 2024
Merged

Animate refresh button #2161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d033fdc
fake refresh button
david-crespo Apr 17, 2024
5b489e1
actually don't fake it!
david-crespo Apr 17, 2024
db5f665
we hate newlines in jsx!
david-crespo Apr 17, 2024
ba06095
remove console.logs and TODOs
david-crespo Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions app/components/RefreshButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,27 @@
* Copyright Oxide Computer Company
*/

import { useState } from 'react'

import { Refresh16Icon } from '@oxide/design-system/icons/react'

import { Button } from '~/ui/lib/Button'
import { SpinnerLoader } from '~/ui/lib/Spinner'

export function RefreshButton({ onClick }: { onClick: () => Promise<void> }) {
const [refreshing, setRefreshing] = useState(false)

async function refresh() {
setRefreshing(true)
await onClick()
setRefreshing(false)
}

export function RefreshButton({ onClick }: { onClick: () => void }) {
return (
<Button size="icon" variant="ghost" onClick={onClick} aria-label="Refresh data">
<Refresh16Icon />
<Button size="icon" variant="ghost" onClick={refresh} aria-label="Refresh data">
<SpinnerLoader isLoading={refreshing}>
<Refresh16Icon />
</SpinnerLoader>
</Button>
)
}
2 changes: 1 addition & 1 deletion app/pages/project/instances/InstancesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export function InstancesPage() {
<PageTitle icon={<Instances24Icon />}>Instances</PageTitle>
</PageHeader>
<TableActions>
<RefreshButton onClick={() => apiQueryClient.invalidateQueries('instanceList')} />
<RefreshButton onClick={refetchInstances} />
<Link to={pb.instancesNew({ project })} className={buttonStyle({ size: 'sm' })}>
New Instance
</Link>
Expand Down
14 changes: 8 additions & 6 deletions app/pages/project/instances/instance/InstancePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,14 @@ function getPrimaryVpcId(nics: InstanceNetworkInterface[]) {
}

// this is meant to cover everything that we fetch in the page
function refreshData() {
apiQueryClient.invalidateQueries('instanceView')
apiQueryClient.invalidateQueries('instanceExternalIpList')
apiQueryClient.invalidateQueries('instanceNetworkInterfaceList')
apiQueryClient.invalidateQueries('instanceDiskList') // storage tab
apiQueryClient.invalidateQueries('diskMetricsList') // metrics tab
async function refreshData() {
await Promise.all([
apiQueryClient.invalidateQueries('instanceView'),
apiQueryClient.invalidateQueries('instanceExternalIpList'),
apiQueryClient.invalidateQueries('instanceNetworkInterfaceList'),
apiQueryClient.invalidateQueries('instanceDiskList'), // storage tab
apiQueryClient.invalidateQueries('diskMetricsList'), // metrics tab
])
}

InstancePage.loader = async ({ params }: LoaderFunctionArgs) => {
Expand Down