tloncorp/landscape
1
1
Fork 0
mirror of https://github.com/tloncorp/landscape.git synced 2024-12-01 02:45:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #207 from tloncorp/land-498-show-spinner-while-loading-storage-settings

Browse Source 
storage: show loading spinner while loading storage settings
This commit is contained in:
Hunter Miller 2023-07-25 10:15:05 -05:00 committed by GitHub
commit a7f306b005
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/preferences/StoragePrefs.tsx
View File

@ -89,6 +89,7 @@ export const StoragePrefs = () => {
<label className="font-semibold" htmlFor="endpoint">
Endpoint<span title="Required field">*</span>
</label>
<div className="relative">
<input
disabled={!loaded}
required
@ -99,11 +100,14 @@ export const StoragePrefs = () => {
{...register('endpoint', { required: true })}
className="input default-ring bg-gray-50"
/>
{!loaded && <Spinner className="absolute top-1 right-2" />}
</div>
</div>
<div className="mb-8 flex flex-col space-y-2">
<label className="font-semibold" htmlFor="key">
Access Key ID<span title="Required field">*</span>
</label>
<div className="relative">
<input
disabled={!loaded}
required
@ -115,11 +119,14 @@ export const StoragePrefs = () => {
{...register('accessId', { required: true })}
className="input default-ring bg-gray-50"
/>
{!loaded && <Spinner className="absolute top-1 right-2" />}
</div>
</div>
<div className="mb-8 flex flex-col space-y-2">
<label className="font-semibold" htmlFor="secretAccessKey">
Secret Access Key<span title="Required field">*</span>
</label>
<div className="relative">
<input
disabled={!loaded}
required
@ -131,11 +138,14 @@ export const StoragePrefs = () => {
{...register('accessSecret', { required: true })}
className="input default-ring bg-gray-50"
/>
{!loaded && <Spinner className="absolute top-1 right-2" />}
</div>
</div>
<div className="mb-8 flex flex-col space-y-2">
<label className="font-semibold" htmlFor="region">
Region<span title="Required field">*</span>
</label>
<div className="relative">
<input
disabled={!loaded}
required
@ -146,11 +156,14 @@ export const StoragePrefs = () => {
{...register('region', { required: true })}
className="input default-ring bg-gray-50"
/>
{!loaded && <Spinner className="absolute top-1 right-2" />}
</div>
</div>
<div className="mb-8 flex flex-col space-y-2">
<label className="font-semibold" htmlFor="bucket">
Bucket Name<span title="Required field">*</span>
</label>
<div className="relative">
<input
disabled={!loaded}
required
@ -161,6 +174,8 @@ export const StoragePrefs = () => {
{...register('bucket', { required: true })}
className="input default-ring bg-gray-50"
/>
{!loaded && <Spinner className="absolute top-1 right-2" />}
</div>
</div>
<Button
type="submit"