refactor to get LoadingIcon and Downloading for later folder loading

components/FileListing.tsx

@@ -16,7 +16,7 @@ import { getBaseUrl, treeList, downloadMultipleFiles, useProtectedSWRInfinite, s
 
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
-import Loading from './Loading'
+import Loading, { LoadingIcon } from './Loading'
 import FourOhFour from './FourOhFour'
 import Auth from './Auth'
 import TextPreview from './previews/TextPreview'
@@ -144,6 +144,22 @@ const Checkbox: FunctionComponent<{
   )
 }
 
+const Downloading: FunctionComponent<{ title: string }> = ({ title }) => {
+  return (
+    <span
+      title={title}
+      className="p-2 rounded"
+      role="status"
+    >
+      <LoadingIcon
+        // Use fontawesome far theme via class `svg-inline--fa` to get style `vertical-align` only
+        // for consistent icon alignment, as class `align-*` cannot satisfy it
+        className="animate-spin w-4 h-4 inline-block svg-inline--fa"
+      />
+    </span>
+  )
+}
+
 const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) => {
   const [imageViewerVisible, setImageViewerVisibility] = useState(false)
   const [activeImageIdx, setActiveImageIdx] = useState(0)
@@ -316,23 +332,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 title={'Select files'}
               />
               {totalGenerating ? (
-                <span title="Downloading selected files, refresh page to cancel" className="p-2 rounded" role="status">
+                <Downloading title="Downloading selected files, refresh page to cancel" />
-                  <svg
-                    // Use fontawesome far theme via class `svg-inline--fa` to get style `vertical-align` only
-                    // for consistent icon alignment, as class `align-*` cannot satisfy it
-                    className="animate-spin w-4 h-4 inline-block svg-inline--fa"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    />
-                  </svg>
-                </span>
               ) : (
                 <button
                   title="Download selected files"

components/Loading.tsx

@@ -3,22 +3,29 @@ import { FunctionComponent } from 'react'
 const Loading: FunctionComponent<{ loadingText: string }> = ({ loadingText }) => {
   return (
     <div className="dark:text-white flex items-center justify-center py-32 space-x-1 rounded">
-      <svg
+      <LoadingIcon className="animate-spin w-5 h-5 mr-3 -ml-1" />
-        className="animate-spin w-5 h-5 mr-3 -ml-1"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
-      </svg>
       <div>{loadingText}</div>
     </div>
   )
 }
 
+// As there is no CSS-in-JS styling system, pass class list to override styles
+export const LoadingIcon: FunctionComponent<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}
+
 export default Loading