Add delayed presentationMode thunks.

ui/src/hosts/containers/HostPage.js

@@ -9,7 +9,7 @@ import DashboardHeader from 'src/dashboards/components/DashboardHeader';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 import {getMappings, getAppsForHosts, getMeasurementsForHost, getAllHosts} from 'src/hosts/apis';
 import {fetchLayouts} from 'shared/apis';
-import {enablePresentationMode} from 'shared/actions/ui';
+import {delayEnablePresentationMode} from 'shared/actions/ui';
 
 const {
   shape,
@@ -187,7 +187,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   handleClickPresentationButton: () => {
-    dispatch(enablePresentationMode())
+    dispatch(delayEnablePresentationMode())
   },
 })
 

ui/src/shared/actions/ui.js

@@ -1,3 +1,5 @@
+import {PRESENTATION_MODE_DELAY} from '../constants'
+
 export function enablePresentationMode() {
   return {
     type: 'ENABLE_PRESENTATION_MODE',
@@ -9,3 +11,15 @@ export function disablePresentationMode() {
     type: 'DISABLE_PRESENTATION_MODE',
   }
 }
+
+export function delayEnablePresentationMode() {
+  return (dispatch) => {
+    setTimeout(() => dispatch(enablePresentationMode()), PRESENTATION_MODE_DELAY)
+  }
+}
+
+export function delayDisablePresentationMode() {
+  return (dispatch) => {
+    setTimeout(() => dispatch(disablePresentationMode()), PRESENTATION_MODE_DELAY)
+  }
+}

ui/src/shared/constants/index.js

@@ -466,4 +466,6 @@ export const DEFAULT_LINE_COLORS = [
 export const STROKE_WIDTH = {
   heavy: 3.5,
   light: 1.5,
-};
+};
+
+export const PRESENTATION_MODE_DELAY = 250 // In milliseconds.