diff --git a/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap b/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
index 6ae1fa43ce7..4c60ddf9d0b 100644
--- a/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
@@ -34,12 +34,14 @@ exports[`bookmarks empty state 1`] = `
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -48,10 +50,12 @@ exports[`bookmarks empty state 1`] = `
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
@@ -315,12 +319,14 @@ exports[`bookmarks should include existing bookmarks for the current controller
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -329,10 +335,12 @@ exports[`bookmarks should include existing bookmarks for the current controller
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
@@ -701,12 +709,14 @@ exports[`bookmarks should not allow creating a new bookmark for users who dont h
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -715,10 +725,12 @@ exports[`bookmarks should not allow creating a new bookmark for users who dont h
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
@@ -1065,12 +1077,14 @@ exports[`bookmarks should show an error message if loading failed 1`] = `
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -1079,10 +1093,12 @@ exports[`bookmarks should show an error message if loading failed 1`] = `
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
@@ -1372,12 +1388,14 @@ exports[`bookmarks should show loading spinner when loading bookmarks 1`] = `
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -1386,10 +1404,12 @@ exports[`bookmarks should show loading spinner when loading bookmarks 1`] = `
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
@@ -1650,12 +1670,14 @@ exports[`bookmarks should show no bookmarks if server did not respond with any 1
     >
       <Uncontrolled(Dropdown)
         id="hosts"
+        onClick={[Function]}
         pullRight={true}
       >
         <Dropdown
           bsClass="dropdown"
           componentClass={[Function]}
           id="hosts"
+          onClick={[Function]}
           onToggle={[Function]}
           pullRight={true}
         >
@@ -1664,10 +1686,12 @@ exports[`bookmarks should show no bookmarks if server did not respond with any 1
             bsClass="btn-group"
             className="dropdown"
             justified={false}
+            onClick={[Function]}
             vertical={false}
           >
             <div
               className="dropdown btn-group"
+              onClick={[Function]}
             >
               <DropdownToggle
                 bsClass="dropdown-toggle"
diff --git a/webpack/assets/javascripts/react_app/components/bookmarks/index.js b/webpack/assets/javascripts/react_app/components/bookmarks/index.js
index f7fc5192441..ded7eeb4927 100644
--- a/webpack/assets/javascripts/react_app/components/bookmarks/index.js
+++ b/webpack/assets/javascripts/react_app/components/bookmarks/index.js
@@ -12,13 +12,15 @@ import helpers from '../../common/helpers';
 class BookmarkContainer extends React.Component {
   constructor(props) {
     super(props);
-    helpers.bindMethods(this, ['handleNewBookmarkClick']);
+    helpers.bindMethods(this, ['handleNewBookmarkClick', 'loadBookmarks']);
   }
 
-  componentDidMount() {
-    const { url, controller, getBookmarks } = this.props;
+  loadBookmarks() {
+    if (this.props.bookmarks.length === 0 && this.props.status !== STATUS.PENDING) {
+      const { url, controller, getBookmarks } = this.props;
 
-    getBookmarks(url, controller);
+      getBookmarks(url, controller);
+    }
   }
 
   handleNewBookmarkClick() {
@@ -45,7 +47,7 @@ class BookmarkContainer extends React.Component {
     return showModal ? (
       <SearchModal show={showModal} controller={controller} url={url} onHide={modalClosed} />
     ) : (
-      <Dropdown pullRight id={controller}>
+      <Dropdown pullRight id={controller} onClick={this.loadBookmarks}>
         <Dropdown.Toggle title={__('Bookmarks')}>
           <Icon type='fa' name='bookmark' />
         </Dropdown.Toggle>