better photo viewing experience

preload photos
photo scale animation

frontend/src/Photos/Overview.scss

@@ -14,7 +14,12 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: $pt-elevation-shadow-4;
+
+        img {
+            box-shadow: $pt-elevation-shadow-4;
+        }
+
+        transition: transform 0.3s;
     }
 
     #photoOverlayDrawer {
@@ -29,7 +34,7 @@
         padding: 1rem;
         background-color: $light-gray5;
         box-shadow: $pt-elevation-shadow-4;
-        transition: transform 0.5s;
+        transition: transform 0.3s;
     }
 }
 
@@ -37,6 +42,10 @@
 .bp3-overlay-appear {
     opacity: 0;
 
+    #photo {
+        transform: scale(0.95, 0.95);
+    }
+
     #photoOverlayDrawer {
         transform: translate(10rem);
     }
@@ -46,6 +55,10 @@
 .bp3-overlay-appear-active {
     opacity: 1;
 
+    #photo {
+        transform: scale(1, 1);
+    }
+
     #photoOverlayDrawer {
         transform: translate(0rem);
     }
@@ -55,6 +68,10 @@
 .bp3-overlay-exit {
     opacity: 1;
 
+    #photo {
+        transform: scale(1, 1);
+    }
+
     #photoOverlayDrawer {
         transform: translate(0rem);
     }
@@ -63,9 +80,12 @@
 .bp3-overlay-exit-active {
     opacity: 0;
 
+    #photo {
+        transform: scale(0.95, 0.95);
+    }
+
     #photoOverlayDrawer {
         transform: translate(10rem);
-
     }
 }
 

frontend/src/Photos/Overview.tsx

@@ -10,6 +10,7 @@ import { PhotoCard } from "./PhotoCard";
 import { Button, Classes, Overlay, Spinner } from "@blueprintjs/core";
 import { UploadButton } from "./UploadButton";
 import { Photo } from "./Photo";
+import { getPhotoThumbPath } from "~redux/api/photos";
 
 export interface IOverviewComponentProps {
     photos: IPhotoReqJSON[];
@@ -71,7 +72,7 @@ export const OverviewComponent: React.FunctionComponent<IOverviewComponentProps>
                 onClose={() => {
                     setOverlayOpen(false);
                 }}
-                transitionDuration={500}
+                transitionDuration={300}
                 lazy
             >
                 <div id="photoOverlayContainer">

frontend/src/Photos/PhotoCard.tsx

@@ -45,6 +45,12 @@ export class PhotoCardComponent extends React.PureComponent<
     */
     public render(): JSX.Element {
         const fileExists = this.props.photo.uploaded;
+
+        const preloadImage = (url: string) => {
+            const img = new Image();
+            img.src = url;
+        };
+
         return (
             <Card
                 className="photoCard"
@@ -55,6 +61,11 @@ export class PhotoCardComponent extends React.PureComponent<
                     <img
                         loading="lazy"
                         src={getPhotoThumbPath(this.props.photo, 512)}
+                        onMouseEnter={() =>
+                            preloadImage(
+                                getPhotoThumbPath(this.props.photo, 2048),
+                            )
+                        }
                     ></img>
                 ) : (
                     <Spinner />