diff --git a/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js b/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js index aabc4cf..6faf9fe 100644 --- a/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js +++ b/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js @@ -42,7 +42,6 @@ const Article = styled(_Article)(props => ({ * Generates a text placeholder for articles */ const ArticlesPlaceholder = props => { - console.log("ArticlesPlaceholder"); /** * Loads the placeholder */ @@ -81,7 +80,7 @@ const Articles = props => { ]); /** - * Loads the data + * Loads data */ const { data } = useDataAPI( articlesPlaceholder, diff --git a/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js b/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js index 1d3f5fd..3df5aa8 100644 --- a/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js +++ b/src/components/LoadingDataApiAxiosPlaceholderSVG/LoadingDataApiAxiosPlaceholderSVG.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useMemo } from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import { Code } from "react-content-loader"; diff --git a/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js b/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js index 315a25d..d347793 100644 --- a/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js +++ b/src/components/LoadingDataGraphQLApollo/LoadingDataGraphQLApollo.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; @@ -79,10 +79,28 @@ const SettingsPlaceholder = props => { * Loads site settings from the database */ const Settings = props => { + /** + * Loads props + */ const { placeholder, displayData } = props; - const defaultProps = SettingsPlaceholder(placeholder); + /** + * Creates the placeholder + */ + const defaultProps = useMemo(() => SettingsPlaceholder(placeholder), [ + placeholder + ]); + + /** + * Loads data + */ const { data } = useData(defaultProps, query, "generalSettings"); + + /** + * Returns data + * + * If `displayData` then returns default data (for demo purposes) + */ const { title, url, description } = displayData ? data : defaultProps; return ( diff --git a/src/components/PlaceholderText/PlaceholderText.js b/src/components/PlaceholderText/PlaceholderText.js index aeb5679..2a7c036 100644 --- a/src/components/PlaceholderText/PlaceholderText.js +++ b/src/components/PlaceholderText/PlaceholderText.js @@ -1,3 +1,4 @@ +import React, { useMemo } from "react"; import PropTypes from "prop-types"; import uuid from "uuid"; @@ -32,6 +33,7 @@ const defaultProps = { * Displays the component */ const PlaceholderText = props => { + console.log("PlaceholderText"); /** * Loads props */ @@ -40,22 +42,29 @@ const PlaceholderText = props => { /** * Generates a text row */ - const textRow = [...Array(rowLength)].map(i => content).join(""); + const textRow = useMemo( + () => [...Array(rowLength)].map(i => content).join(""), + [content, rowLength] + ); /** * Generates the text rows */ - const textRows = [...Array(numberOfRows)].map(i => { - /** - * Generates a random uuid - */ - const id = uuid.v4(); + const textRows = useMemo( + () => + [...Array(numberOfRows)].map(i => { + /** + * Generates a random uuid + */ + const id = uuid.v4(); - return { - id: id, - text: textRow - }; - }); + return { + id: id, + text: textRow + }; + }), + [numberOfRows, textRow] + ); return textRows; };