From 3f80a8db4957d4a6285466b33a25bd852923acbb Mon Sep 17 00:00:00 2001
From: Corey Robertson <corey.robertson@elastic.co>
Date: Thu, 9 Jul 2020 15:58:46 -0400
Subject: [PATCH] Only fetch saved elements once

---
 .../saved_elements_modal.tsx                    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
index 44d2f70fcdfad..c318743086b44 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
@@ -4,7 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, ChangeEvent, FunctionComponent, useState, useEffect } from 'react';
+import React, {
+  Fragment,
+  ChangeEvent,
+  FunctionComponent,
+  useState,
+  useEffect,
+  useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiModal,
@@ -72,12 +79,16 @@ export const SavedElementsModal: FunctionComponent<Props> = ({
   removeCustomElement,
   updateCustomElement,
 }) => {
+  const hasLoadedElements = useRef<boolean>(false);
   const [elementToDelete, setElementToDelete] = useState<CustomElement | null>(null);
   const [elementToEdit, setElementToEdit] = useState<CustomElement | null>(null);
 
   useEffect(() => {
-    findCustomElements();
-  });
+    if (!hasLoadedElements.current) {
+      hasLoadedElements.current = true;
+      findCustomElements();
+    }
+  }, [findCustomElements, hasLoadedElements]);
 
   const showEditModal = (element: CustomElement) => setElementToEdit(element);
   const hideEditModal = () => setElementToEdit(null);