added empty avatar placeholder

src/components/common/Avatar/index.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { Square } from '~/components/common/Square';
 import { ImagePresets } from '~/constants/urls';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { getURLFromString } from '~/utils/dom';
 import { DivProps } from '~/utils/types';
 
@@ -17,17 +18,20 @@ interface Props extends DivProps {
 }
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
-  ({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => {
+  (
+    { url, username, size, className, preset = ImagePresets.avatar, ...rest },
+    ref,
+  ) => {
     return (
       <Square
         {...rest}
-        image={getURLFromString(url, preset)}
+        image={getURLFromString(url, preset) || '/images/john_doe.svg'}
         className={classNames(styles.avatar, className)}
         size={size}
         ref={ref}
       />
     );
-  }
+  },
 );
 
 export { Avatar };

src/components/common/Square/index.tsx

@@ -19,14 +19,14 @@ const Square = forwardRef<HTMLDivElement, SquareProps>(
       <div
         {...rest}
         className={classNames(styles.wrapper, rest.className)}
-        style={{ backgroundImage, width: size }}
+        style={{ backgroundImage, width: size, height: size, flexBasis: size }}
         ref={ref}
       >
         <svg className={styles.svg} viewBox="0 0 1 1" />
         {!!children && <div className={styles.content}>{children}</div>}
       </div>
     );
-  }
+  },
 );
 
 export { Square };