Debounces update-viewport to reduce re-renders and improve performance

Fixes #1910 by debouncing the state update calls which can be expensive.
Also uses the same debounce timing as Mirador 2.

package.json

@@ -36,6 +36,7 @@
     "deepmerge": "^3.1.0",
     "i18next": "^14.0.1",
     "intersection-observer": "^0.5.1",
+    "lodash": "^4.17.11",
     "manifesto.js": "^3.0.9",
     "node-fetch": "^2.3.0",
     "node-sass": "^4.9.2",

src/components/OpenSeadragonViewer.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import OpenSeadragon from 'openseadragon';
+import debounce from 'lodash/debounce';
 import ns from '../config/css-ns';
 import ZoomControls from '../containers/ZoomControls';
 
@@ -36,7 +37,8 @@ class OpenSeadragonViewer extends Component {
       showNavigationControl: false,
       preserveImageSizeOnResize: true,
     });
-    this.viewer.addHandler('viewport-change', this.onViewportChange);
+    console.log(this.viewer);
+    this.viewer.addHandler('viewport-change', debounce(this.onViewportChange, 300));
 
     if (viewer) {
       this.viewer.viewport.panTo(viewer, false);