photos fade in

frontend/src/Photos/Overview.scss

@@ -19,7 +19,7 @@
             box-shadow: $pt-elevation-shadow-4;
         }
 
-        transition: transform 0.3s;
+        transition: all 0.3s;
     }
 
     #photoOverlayDrawer {

frontend/src/Photos/Overview.tsx

@@ -55,7 +55,6 @@ export const OverviewComponent: React.FunctionComponent<IOverviewComponentProps>
             e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
             e.currentTarget.scrollHeight - 100
         ) {
-            console.log(props.allPhotosLoaded, props.overviewFetching);
             if (!props.allPhotosLoaded && !props.overviewFetching) {
                 props.fetchPhotos();
             }

frontend/src/Photos/Photo.scss

@@ -9,7 +9,16 @@
     #photo {
         max-height: 100%;
         max-width: 100%;
+
+        &.notLoaded {
+            opacity: 0;
+        }
+
+        &.loaded {
+            opacity: 1;
+        }
     }
+
 }
 
 .bp3-dark {

frontend/src/Photos/Photo.tsx

@@ -20,6 +20,8 @@ export interface IPhotoComponentProps {
 export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
     props,
 ) => {
+    const [loaded, setLoaded] = React.useState<boolean>(false);
+
     if (!props.photo && !props.photoState?.fetching) {
         props.fetchPhoto(props.id);
     }
@@ -36,6 +38,8 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
                     <img
                         id="photo"
                         loading="lazy"
+                        className={loaded ? "loaded" : "notLoaded"}
+                        onLoad={() => setLoaded(true)}
                         src={getPhotoThumbPath(props.photo, 2048)}
                     />
                 </div>

frontend/src/Photos/PhotoCard.scss

@@ -0,0 +1,13 @@
+.photoCard {
+    img {
+        transition: all 0.3s;
+    }
+
+    .notLoaded {
+        opacity: 0;
+    }
+
+    .loaded {
+        opacity: 1;
+    }
+}

frontend/src/Photos/PhotoCard.tsx

@@ -1,3 +1,5 @@
+import "./PhotoCard.scss";
+
 import {
     Card,
     ContextMenuTarget,
@@ -23,15 +25,30 @@ export interface IPhotoCardComponentProps extends RouteComponentProps {
     onClick: () => void;
 }
 
+export interface IPhotoCardComponentState {
+    loaded: boolean;
+}
+
+const defaultPhotoCardState: IPhotoCardComponentState = {
+    loaded: false,
+};
+
 @ContextMenuTarget
 export class PhotoCardComponent extends React.PureComponent<
-    IPhotoCardComponentProps
+    IPhotoCardComponentProps,
+    IPhotoCardComponentState
 > {
     constructor(props: IPhotoCardComponentProps) {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
+        this.setLoaded = this.setLoaded.bind(this);
         //this.handleEdit = this.handleEdit.bind(this);
+        this.state = defaultPhotoCardState;
+    }
+
+    private setLoaded(loaded: boolean) {
+        this.setState({ ...this.state, loaded });
     }
 
     public handleDelete(): void {
@@ -61,6 +78,8 @@ export class PhotoCardComponent extends React.PureComponent<
                     <img
                         loading="lazy"
                         src={getPhotoThumbPath(this.props.photo, 512)}
+                        className={this.state.loaded ? "loaded" : "notLoaded"}
+                        onLoad={() => this.setLoaded(true)}
                         onMouseEnter={() =>
                             preloadImage(
                                 getPhotoThumbPath(this.props.photo, 2048),