Don't use the unclicked state until after the first click.

https://twitter.com/LuigiHann/status/959120559970930689

js/components/MainWindow/Minimize.js

@@ -0,0 +1,23 @@
+import React from "react";
+import classnames from "classnames";
+
+export default class Minimize extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { clicked: false };
+  }
+  render() {
+    return (
+      <div
+        id="minimize"
+        className={classnames(this.state)}
+        onClick={() => {
+          if (!this.state.clicked) {
+            this.setState({ clicked: true });
+          }
+        }}
+        title="Minimize"
+      />
+    );
+  }
+}

js/components/MainWindow/Shade.js

@@ -1,11 +1,30 @@
 import React from "react";
+import classnames from "classnames";
 import { connect } from "react-redux";
 
 import { toggleMainWindowShadeMode } from "../../actionCreators";
 
-const Shade = props => (
-  <div id="shade" onClick={props.handleClick} title="Toggle Windowshade Mode" />
-);
+class Shade extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { clicked: false };
+  }
+  render() {
+    return (
+      <div
+        id="shade"
+        className={classnames(this.state)}
+        onClick={() => {
+          if (!this.state.clicked) {
+            this.setState({ clicked: true });
+          }
+          this.props.handleClick();
+        }}
+        title="Toggle Windowshade Mode"
+      />
+    );
+  }
+}
 
 const mapDispatchToProps = {
   handleClick: toggleMainWindowShadeMode

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -36,9 +36,13 @@ exports[`MainWindow renders to snapshot 1`] = `
       </div>
     </div>
     <div
+      className=""
       id="minimize"
+      onClick={[Function]}
+      title="Minimize"
     />
     <div
+      className=""
       id="shade"
       onClick={[Function]}
       title="Toggle Windowshade Mode"

js/components/MainWindow/index.js

@@ -29,6 +29,7 @@ import MonoStereo from "./MonoStereo";
 import Position from "./Position";
 import Repeat from "./Repeat";
 import Shade from "./Shade";
+import Minimize from "./Minimize";
 import Shuffle from "./Shuffle";
 import Time from "./Time";
 import Visualizer from "./Visualizer";
@@ -90,7 +91,7 @@ export class MainWindow extends React.Component {
         >
           <MainContextMenu />
           {shade && <MiniTime />}
-          <div id="minimize" />
+          <Minimize />
           <Shade />
           <Close />
         </div>

js/skinSelectors.js

@@ -229,9 +229,9 @@ export const imageSelectors = {
     "#title-bar #option:active",
     "#title-bar #option:selected"
   ],
-  MAIN_MINIMIZE_BUTTON: [".selected #title-bar #minimize"],
+  MAIN_MINIMIZE_BUTTON: [".selected #title-bar #minimize.clicked"],
   MAIN_MINIMIZE_BUTTON_DEPRESSED: ["#title-bar #minimize:active"],
-  MAIN_SHADE_BUTTON: [".selected #title-bar #shade"],
+  MAIN_SHADE_BUTTON: [".selected #title-bar #shade.clicked"],
   MAIN_SHADE_BUTTON_DEPRESSED: ["#title-bar #shade:active"],
   MAIN_CLOSE_BUTTON: [".selected #title-bar #close"],
   MAIN_CLOSE_BUTTON_DEPRESSED: ["#title-bar #close:active"],