From 756bce9feb54a4bd649e434edb96a6ee666a7830 Mon Sep 17 00:00:00 2001
From: Daniel Tischenko <daniil.tishenko.99@gmail.com>
Date: Tue, 25 Jul 2023 15:35:53 +0300
Subject: [PATCH] Show loading spinner while loading storage settings (to make
 it clear that the fields are disabled)

---
 ui/src/preferences/StoragePrefs.tsx | 119 ++++++++++++++++------------
 1 file changed, 67 insertions(+), 52 deletions(-)

diff --git a/ui/src/preferences/StoragePrefs.tsx b/ui/src/preferences/StoragePrefs.tsx
index beacf06..1d57211 100644
--- a/ui/src/preferences/StoragePrefs.tsx
+++ b/ui/src/preferences/StoragePrefs.tsx
@@ -89,78 +89,93 @@ export const StoragePrefs = () => {
           <label className="font-semibold" htmlFor="endpoint">
             Endpoint<span title="Required field">*</span>
           </label>
-          <input
-            disabled={!loaded}
-            required
-            id="endpoint"
-            type="url"
-            autoCorrect="off"
-            defaultValue={s3.credentials?.endpoint}
-            {...register('endpoint', { required: true })}
-            className="input default-ring bg-gray-50"
-          />
+          <div className="relative">
+            <input
+              disabled={!loaded}
+              required
+              id="endpoint"
+              type="url"
+              autoCorrect="off"
+              defaultValue={s3.credentials?.endpoint}
+              {...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>
-          <input
-            disabled={!loaded}
-            required
-            id="key"
-            type="text"
-            autoCorrect="off"
-            spellCheck="false"
-            defaultValue={s3.credentials?.accessKeyId}
-            {...register('accessId', { required: true })}
-            className="input default-ring bg-gray-50"
-          />
+          <div className="relative">
+            <input
+              disabled={!loaded}
+              required
+              id="key"
+              type="text"
+              autoCorrect="off"
+              spellCheck="false"
+              defaultValue={s3.credentials?.accessKeyId}
+              {...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>
-          <input
-            disabled={!loaded}
-            required
-            id="secretAccessKey"
-            type="text"
-            autoCorrect="off"
-            spellCheck="false"
-            defaultValue={s3.credentials?.secretAccessKey}
-            {...register('accessSecret', { required: true })}
-            className="input default-ring bg-gray-50"
-          />
+          <div className="relative">
+            <input
+              disabled={!loaded}
+              required
+              id="secretAccessKey"
+              type="text"
+              autoCorrect="off"
+              spellCheck="false"
+              defaultValue={s3.credentials?.secretAccessKey}
+              {...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>
-          <input
-            disabled={!loaded}
-            required
-            id="region"
-            type="text"
-            autoCorrect="off"
-            defaultValue={s3.configuration?.region}
-            {...register('region', { required: true })}
-            className="input default-ring bg-gray-50"
-          />
+          <div className="relative">
+            <input
+              disabled={!loaded}
+              required
+              id="region"
+              type="text"
+              autoCorrect="off"
+              defaultValue={s3.configuration?.region}
+              {...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>
-          <input
-            disabled={!loaded}
-            required
-            id="bucket"
-            type="text"
-            autoCorrect="off"
-            defaultValue={s3.configuration.currentBucket}
-            {...register('bucket', { required: true })}
-            className="input default-ring bg-gray-50"
-          />
+          <div className="relative">
+            <input
+              disabled={!loaded}
+              required
+              id="bucket"
+              type="text"
+              autoCorrect="off"
+              defaultValue={s3.configuration.currentBucket}
+              {...register('bucket', { required: true })}
+              className="input default-ring bg-gray-50"
+            />
+            {!loaded && <Spinner className="absolute top-1 right-2" />}
+          </div>
         </div>
         <Button
           type="submit"