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 474b8f3494917..8c41cff4e8caa 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 = ({ removeCustomElement, updateCustomElement, }) => { + const hasLoadedElements = useRef(false); const [elementToDelete, setElementToDelete] = useState(null); const [elementToEdit, setElementToEdit] = useState(null); useEffect(() => { - findCustomElements(); - }); + if (!hasLoadedElements.current) { + hasLoadedElements.current = true; + findCustomElements(); + } + }, [findCustomElements, hasLoadedElements]); const showEditModal = (element: CustomElement) => setElementToEdit(element); const hideEditModal = () => setElementToEdit(null);