Add animated avatar placeholder (#270)

* Add animated avatar placeholder * Fix imports
RoboSats · Oct 6, 2022 · 4c8058d · 4c8058d
1 parent 01bcb03
commit 4c8058d
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 18 deletions.
diff --git a/frontend/src/components/BookTable.tsx b/frontend/src/components/BookTable.tsx
@@ -160,6 +160,7 @@ const BookTable = ({
                 nickname={params.row.maker_nick}
                 style={{ width: '3.215em', height: '3.215em' }}
                 smooth={true}
+                flipHorizontally={true}
                 orderType={params.row.type}
                 statusColor={statusBadgeColor(params.row.maker_status)}
                 tooltip={t(params.row.maker_status)}

diff --git a/frontend/src/components/Robots/RobotAvatar/index.tsx b/frontend/src/components/Robots/RobotAvatar/index.tsx
@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import SmoothImage from 'react-smooth-image';
-import { Avatar, Badge, Tooltip } from '@mui/material';
+import { Avatar, Badge, Tooltip, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { SendReceiveIcon } from '../../Icons';
 import { apiClient } from '../../../services/api';
+import placeholder from './placeholder.json';
 
 interface Props {
   nickname: string;
   smooth?: boolean;
+  flipHorizontally?: boolean;
   style?: object;
   imageStyle?: object;
   statusColor?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
@@ -23,13 +25,14 @@ const RobotAvatar: React.FC<Props> = ({
   statusColor,
   tooltip,
   smooth = false,
+  flipHorizontally = false,
   style = {},
-  imageStyle = {},
   avatarClass = 'flippedSmallAvatar',
+  imageStyle = {},
   onLoad = () => {},
 }) => {
   const { t } = useTranslation();
-
+  const theme = useTheme();
   const [avatarSrc, setAvatarSrc] = useState<string>();
 
   useEffect(() => {
@@ -54,17 +57,29 @@ const RobotAvatar: React.FC<Props> = ({
   const getAvatar = () => {
     if (smooth) {
       return (
-        <div style={style}>
-          <SmoothImage
-            src={avatarSrc}
-            imageStyles={{
-              borderRadius: '50%',
-              transform: 'scaleX(-1)',
-              border: '0.3px solid #555',
-              filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
-              ...imageStyle,
-            }}
-          />
+        <div
+          style={{
+            ...style,
+            imageRendering: 'high-quality',
+            backgroundSize: '100%',
+            borderRadius: '50%',
+            transform: flipHorizontally ? 'scaleX(-1)' : '',
+            border: '0.3px solid #55555',
+            filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
+            backgroundImage: `url(data:${placeholder.image.mime};base64,${placeholder.image.data})`,
+          }}
+        >
+          <div className={theme.palette.mode === 'dark' ? 'loadingAvatarDark' : 'loadingAvatar'}>
+            <SmoothImage
+              src={avatarSrc}
+              imageStyles={{
+                borderRadius: '50%',
+                border: '0.3px solid #55555',
+                filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
+                ...imageStyle,
+              }}
+            />
+          </div>
         </div>
       );
     } else {

diff --git a/frontend/src/components/Robots/RobotAvatar/placeholder.gif b/frontend/src/components/Robots/RobotAvatar/placeholder.gif
diff --git a/frontend/src/components/Robots/RobotAvatar/placeholder.json b/frontend/src/components/Robots/RobotAvatar/placeholder.json
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
@@ -231,15 +231,15 @@ class UserGenPage extends Component {
               <Grid item xs={12} align='center'>
                 <RobotAvatar
                   nickname={this.state.nickname}
-                  style={{ maxWidth: 200 * fontSizeFactor, maxHeight: 200 * fontSizeFactor }}
+                  smooth={true}
+                  style={{ maxWidth: 203 * fontSizeFactor, maxHeight: 203 * fontSizeFactor }}
                   imageStyle={{
                     transform: '',
                     border: '2px solid #555',
                     filter: 'drop-shadow(1px 1px 1px #000000)',
-                    height: `${195 * fontSizeFactor}px`,
-                    width: `${200 * fontSizeFactor}px`,
+                    height: `${201 * fontSizeFactor}px`,
+                    width: `${201 * fontSizeFactor}px`,
                   }}
-                  smooth={true}
                   tooltip={t('This is your trading avatar')}
                 />
                 <br />

diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
@@ -178,3 +178,46 @@ input[type='number'] {
     width: 100%;
   }
 }
+
+@keyframes animatedBackground {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 0 80px;
+  }
+}
+
+.loadingAvatar {
+  background-size: 100%;
+  border-radius: 50%;
+  border: 0.3px solid #555;
+  filter: dropShadow(0.5px 0.5px 0.5px #000000);
+  background-image: linear-gradient(
+    0deg,
+    #ffffffab 0%,
+    #cfcfcfc2 40%,
+    #a3a3a3cc 60%,
+    #ffffffab 100%
+  );
+  background-position: 0px 0px;
+  background-repeat: repeat;
+  animation: animatedBackground 5s linear infinite;
+}
+
+.loadingAvatarDark {
+  background-size: 100%;
+  border-radius: 50%;
+  border: 0.3px solid #555;
+  filter: dropShadow(0.5px 0.5px 0.5px #000000);
+  background-image: linear-gradient(
+    0deg,
+    #6e6e6ec2 0%,
+    #14141479 40%,
+    #14141479 60%,
+    #6e6e6ec2 100%
+  );
+  background-position: 0px 0px;
+  background-repeat: repeat;
+  animation: animatedBackground 5s linear infinite;
+}