From 4853143d26dbdcbb8309bf762c7dcd03ea413eec Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 23 Jun 2021 14:55:37 +0700
Subject: [PATCH] fixed default width and height for file loader

---
 src/components/media/ImagePreloader/index.tsx | 22 +++++++++++--------
 src/utils/hooks/useResizeHandler.ts           |  8 +++++++
 2 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/hooks/useResizeHandler.ts

diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx
index 31b43dab..e75ee5dd 100644
--- a/src/components/media/ImagePreloader/index.tsx
+++ b/src/components/media/ImagePreloader/index.tsx
@@ -1,12 +1,12 @@
-import React, { FC, MouseEventHandler, useCallback, useEffect, useState } from 'react';
+import React, { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { describeArc, getURL } from '~/utils/dom';
+import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import styles from './styles.module.scss';
 import { IFile } from '~/redux/types';
-import { LoaderCircleInner } from '~/components/input/LoaderCircleInner';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { Icon } from '~/components/input/Icon';
+import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
 
 interface IProps {
   file: IFile;
@@ -15,6 +15,9 @@ interface IProps {
   className?: string;
 }
 
+const DEFAULT_WIDTH = 1920;
+const DEFAULT_HEIGHT = 1020;
+
 const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
   const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
   const [loaded, setLoaded] = useState(false);
@@ -37,20 +40,21 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
     setHasError(true);
   }, [setHasError]);
 
-  useEffect(() => {
-    window.addEventListener('resize', onResize);
+  const [width, height] = useMemo(
+    () => [file?.metadata?.width || DEFAULT_WIDTH, file?.metadata?.height || DEFAULT_HEIGHT],
+    [file?.metadata]
+  );
 
-    return () => window.removeEventListener('resize', onResize);
-  }, [onResize]);
+  useResizeHandler(onResize);
 
   return (
     <>
       <svg
-        viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`}
+        viewBox={`0 0 ${width} ${height}`}
         className={classNames(styles.preview, { [styles.is_loaded]: loaded })}
         style={{
           maxHeight,
-          height: file?.metadata?.height || 'auto',
+          height: height,
         }}
         onClick={onClick}
       >
diff --git a/src/utils/hooks/useResizeHandler.ts b/src/utils/hooks/useResizeHandler.ts
new file mode 100644
index 00000000..cd2f8731
--- /dev/null
+++ b/src/utils/hooks/useResizeHandler.ts
@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+
+export const useResizeHandler = (onResize: () => any) => {
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [onResize]);
+};