Heic loader (#1765)

* Colors fixed * Colors fixed * Forced default * Changed to transparent * lingui extract * resolve dark mode spinner Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Michael Yankelev <myankelev@gmail.com>
ChainSafe · FSM1 · Dec 8, 2021 · Nov 16, 2021 · Nov 16, 2021 · Nov 16, 2021
commit f1e3828e8daf35eec48684c4cb0615b6210be745
diff --git a/packages/common-components/src/Button/Button.tsx b/packages/common-components/src/Button/Button.tsx
@@ -361,7 +361,7 @@ const Button: React.FC<IButtonProps> = ({
       {loading && (
         <>
           <Loading
-            type="inherit"
+            type="initial"
             size={16}
           />
         </>

diff --git a/packages/common-components/src/Spinner/Loading.tsx b/packages/common-components/src/Spinner/Loading.tsx
@@ -1,8 +1,8 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { ITheme, useTheme } from "@chainsafe/common-theme"
 
 export interface ILoadingProps {
-  type?: "inherit" | "primary" | "dark" | "light"
+  type?: "initial" | "primary" | "dark" | "light"
   size?: number
   className?: string
 }
@@ -13,6 +13,42 @@ const Loading: React.FC<ILoadingProps> = ({
   className
 }) => {
   const theme: ITheme = useTheme()
+
+  const uniqueKey = `${Math.random()}-${Math.random()}`
+
+  const {
+    start,
+    end
+  } = useMemo(() => {
+    switch (type) {
+      case "primary":
+        return {
+          start: theme.palette.primary.main,
+          end: "transparent"
+        }
+      case "light":
+        return {
+          start: theme.palette.common.white.main,
+          end: "transparent"
+        }
+      case "dark":
+        return {
+          start: theme.palette.common.black.main,
+          end: "transparent"
+        }
+      case "initial":
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+      default:
+        return {
+          start: "#FFFFFF",
+          end: "transparent"
+        }
+    }
+  }, [type, theme.palette])
+
   return (
     <svg
       width={size}
@@ -22,35 +58,27 @@ const Loading: React.FC<ILoadingProps> = ({
     >
       <defs>
         <linearGradient
-          id="gradient"
+          id={`gradient-${uniqueKey}`}
           x1="0%"
           y1="0%"
           x2="0%"
           y2="100%"
         >
           <stop
             offset="0%"
-            stopColor={
-              type === "primary"
-                ? theme.palette.primary.main
-                : type === "dark"
-                  ? theme.palette.common.black.main
-                  : theme.palette.additional["gray"][5]
-            }
+            stopColor={start}
           />
           <stop
             offset="100%"
-            stopColor={
-              type === "light" ? theme.palette.common.white.main : "transparent"
-            }
+            stopColor={end}
           />
         </linearGradient>
       </defs>
       <circle
         cx="50"
         cy="50"
         r="47"
-        stroke="url(#gradient)"
+        stroke={`url(#gradient-${uniqueKey})`}
         strokeWidth="6"
         fill="none"
         transform="rotate(90 50 50)"

diff --git a/packages/files-ui/src/Components/Elements/MnemonicForm.tsx b/packages/files-ui/src/Components/Elements/MnemonicForm.tsx
@@ -137,7 +137,7 @@ const MnemonicForm = ({ buttonLabel, onComplete }: Props) => {
               className={classes.loader}
             >
               <Loading
-                type="inherit"
+                type="initial"
                 size={16}
               />
               <Trans>

diff --git a/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx b/packages/files-ui/src/Components/Elements/ShareTransferRequestModal.tsx
@@ -123,7 +123,7 @@ const ShareTransferRequestModal = ({ requests }: Props) => {
             requests.length > 1 && (isClearing
               ? <Loading
                 size={25}
-                type='inherit'
+                type="initial"
               />
               : <Typography
                 className={clsx(classes.clearAll)}

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -240,7 +240,7 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
           <div className={classes.loadingContainer}>
             <Loading
               size={32}
-              type="inherit"
+              type="initial"
             />
           </div>
         </Grid>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/LinkSharing/LinkList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/LinkSharing/LinkList.tsx
@@ -227,7 +227,7 @@ const LinkList = ({ bucketId, bucketEncryptionKey }: Props) => {
           className={classes.loader}
         >
           <Loading
-            type="inherit"
+            type="initial"
             size={24}
           />
         </Typography>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/LinkSharing/SharingLink.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/LinkSharing/SharingLink.tsx
@@ -212,7 +212,7 @@ const SharingLink = ({ nonce, bucketEncryptionKey, refreshNonces }: Props) => {
           className={classes.loader}
         >
           <Loading
-            type="inherit"
+            type="initial"
             size={24}
           />
         </Typography>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ReportFileModal.tsx
@@ -276,7 +276,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => {
           <div className={classes.loadingContainer}>
             <Loading
               size={32}
-              type="inherit"
+              type="initial"
             />
           </div>
         </Grid>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
@@ -263,7 +263,7 @@ const SharedFileBrowser = () => {
     return (
       <div className={classes.messageWrapper}>
         <Loading
-          type="inherit"
+          type="initial"
           size={48}
         />
       </div>

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -848,7 +848,7 @@ const FilesList = ({ isShared = false }: Props) => {
       >
         <Loading
           size={24}
-          type="light"
+          type="initial"
         />
         <Typography
           variant="body2"

diff --git a/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx b/packages/files-ui/src/Components/Modules/LinkSharingModule.tsx
@@ -127,7 +127,7 @@ const LinkSharingModule = () => {
           {!error && !newBucket && isValidNonce !== false && (
             <>
               <Loading
-                type="inherit"
+                type="initial"
                 size={48}
                 className={classes.icon}
               />

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -360,7 +360,7 @@ const InitialScreen = ({ className }: IInitialScreen) => {
           <Loading
             className={classes.loader}
             size={50}
-            type='inherit'
+            type="initial"
           />
         </>}
       </section>

diff --git a/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx b/packages/files-ui/src/Components/Modules/PreviewRenderers/ImagePreview.tsx
@@ -48,7 +48,7 @@ const ImagePreview: React.FC<IPreviewRendererProps> = ({ contents, contentType }
   const [imageUrl, setImageUrl] = useState<string | undefined>()
   const [loading, setLoading] = useState(false)
   useEffect(() => {
-    if (contentType !== "image/heic") {
+    if (contentType !== "image/heic" && contentType !== "image/heif") {
       setImageUrl(URL.createObjectURL(contents))
     } else {
       setLoading(true)
@@ -72,7 +72,7 @@ const ImagePreview: React.FC<IPreviewRendererProps> = ({ contents, contentType }
       {loading
         ? <Loading
           size={50}
-          type='inherit'
+          type="initial"
         />
         : <TransformWrapper
           options={{

diff --git a/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/index.tsx b/packages/files-ui/src/Components/Modules/Settings/SavedBrowsers/index.tsx
@@ -41,7 +41,7 @@ const SavedBrowsers: React.FC<{isRefreshing: boolean}> = ({ isRefreshing }) => {
       >
         <Trans>Saved Browsers</Trans> {isRefreshing && <Loading
           size={16}
-          type='inherit'
+          type="initial"
         />}
       </Typography>
       {browserShares

diff --git a/packages/storage-ui/src/Components/Modules/LoginModule.tsx b/packages/storage-ui/src/Components/Modules/LoginModule.tsx
@@ -319,7 +319,7 @@ const LoginModule = ({ className }: IInitialScreen) => {
           <Loading
             className={classes.loader}
             size={50}
-            type='inherit'
+            type="initial"
           />
         </>}
       </section>