Improve presentview performance

api/src/routes/images.js

@@ -18,8 +18,6 @@ function loadImageRoutes({ app, driver, scanner }) {
       return res.status(401).send(err.message)
     }
 
-    console.log('Getting image for user', user.username)
-
     const session = driver.session()
 
     const result = await session.run(

ui/src/components/photoGallery/PhotoGallery.js

@@ -127,6 +127,7 @@ class PhotoGallery extends React.Component {
         <PresentView
           presenting={presenting}
           image={activeImage && activeImage.id}
+          thumbnail={activeImage && activeImage.thumbnail.url}
           imageLoaded={this.preloadImages()}
         />
       </div>

ui/src/components/photoGallery/PresentView.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
@@ -42,10 +42,12 @@ const PresentImage = styled(ProtectedImage)`
   object-position: center;
 `
 
-export default class PresentView extends React.Component {
-  render() {
-    const { image, presenting } = this.props
-
+const PresentView = ({
+  image,
+  presenting,
+  thumbnail,
+  imageLoaded: imageLoadedCallback,
+}) => {
   if (!image || !presenting) {
     return null
   }
@@ -55,19 +57,23 @@ export default class PresentView extends React.Component {
       <PreventScroll />
       <Query query={imageQuery} variables={{ id: image }}>
         {({ loading, error, data }) => {
-            if (loading) return 'Loading...'
           if (error) return error
 
+          let original = null
+          if (!loading) {
             const { photo } = data
-
-            console.log(photo)
+            original = (
+              <PresentImage
+                src={photo && photo.original.url}
+                onLoad={imageLoadedCallback && imageLoadedCallback()}
+              />
+            )
+          }
 
           return (
             <div>
-                <PresentImage
-                  src={photo && photo.original.url}
-                  onLoad={this.props.imageLoaded && this.props.imageLoaded()}
-                />
+              <PresentImage src={thumbnail} />
+              {original}
             </div>
           )
         }}
@@ -75,4 +81,5 @@ export default class PresentView extends React.Component {
     </PresentContainer>
   )
 }
-}
+
+export default PresentView

ui/src/components/photoGallery/ProtectedImage.js

@@ -5,7 +5,6 @@ let imageCache = {}
 export async function fetchProtectedImage(src) {
   if (src) {
     if (imageCache[src]) {
-      console.log('Found image from cache', src)
       return imageCache[src]
     }
 
@@ -18,11 +17,6 @@ export async function fetchProtectedImage(src) {
     image = await image.blob()
     const url = URL.createObjectURL(image)
 
-    console.log(
-      `Saved image to cache, ${src}. New cache size: ${
-        Object.keys(imageCache).length
-      }`
-    )
     imageCache[src] = url
 
     return url