lazier loading, zoom-on-hover

src/components/big_picture.tsx

@@ -35,10 +35,11 @@ export class BigPicture extends React.PureComponent<Props, {}> {
             href={`img/${this.props.image.src}`}
             target="_blank"
           >
-            Download
+            ⬇ Download
           </a>
           <span
             className="BigPicture-footerLink"
+            role="button"
             onClick={this.props.onClose}
             onKeyPress={this._keyPress}
             tabIndex={0}

src/components/grid.tsx

@@ -63,7 +63,7 @@ export class Grid extends React.PureComponent<Props, {}> {
             key={image.src}
             width={(image.width / image.height) * height}
             defer={
-              this.gridHeight > this.props.pageBottom + 2 * this._rowHeight()
+              this.gridHeight > this.props.pageBottom
             }
           />
         );

src/components/picture.tsx

@@ -10,7 +10,7 @@ export interface Props {
 }
 
 export interface State {
-  hasLoadedOnce: boolean;
+    isMounted: boolean;
 }
 
 interface SrcSetInfo {
@@ -23,17 +23,15 @@ export class Picture extends React.PureComponent<Props, State> {
   static displayName = "Picture";
 
   state: State = {
-    hasLoadedOnce: false
+    isMounted: false
   };
 
-  static getDerivedStateFromProps(props: Props, state: State): State | null {
-    return !state.hasLoadedOnce && !props.defer
-      ? { hasLoadedOnce: true }
-      : null;
+  componentDidMount() {
+      this.setState({ isMounted: true });
   }
 
   render() {
-    if (this.props.defer && !this.state.hasLoadedOnce) {
+    if (this.props.defer || !this.state.isMounted) {
       return (
         <div
           className="Picture-defer"