added changes in playground UI

src/Components/PlayGround.jsx

@@ -73,6 +73,7 @@ const PlayGround = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [imageColumn, setImageColumn] = useState(null);
+  const [dataFetched,setDataFetched] = useState(false)
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [paginationPages, setPaginationPages] = useState(null);
@@ -189,6 +190,7 @@ const PlayGround = () => {
       const data = await response.json();
       setIsLoading(false);
       if (data.status === "success") {
+        setDataFetched(true)
         setTotalData(data.results);
         var tmp = {};
         tmp.type = type;
@@ -403,7 +405,7 @@ const PlayGround = () => {
           ref={resultsContainerRef}
           className="d-flex w-100 justify-content-center"
         >
-          {getTableData()}
+          {dataFetched && getTableData()}
         </div>
       </div>
       {isLoading && <LoadingContainer />}

src/Components/QueryExecutor.jsx

@@ -51,6 +51,7 @@ const QueryExecutor = () => {
   const [query, setQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [paginationPages, setPaginationPages] = useState(null);
+  const [dataFetched,setDataFetched] = useState(false)
   const [limit, setLimit] = useState("");
   const recordsPerPage = 50;
   const navigate = useNavigate();
@@ -100,6 +101,7 @@ const QueryExecutor = () => {
   }, [reduxPlaygroundPageNo]);
 
   const fetchQueryValue = async () => {
+    setDataFetched(false)
     if (query.includes("limit")) {
       alert("Please specify the limit in the input field.");
       return;
@@ -140,6 +142,7 @@ const QueryExecutor = () => {
       const data = await response.json();
       setIsLoading(false);
       if (data.status === "success") {
+        setDataFetched(true)
         setTotalData(data.results);
         dispatch(updatePlaygroundResults(data?.results));
         const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
@@ -155,6 +158,11 @@ const QueryExecutor = () => {
     }
   };
 
+
+useEffect(()=>{
+     console.log("datafetched ======= ",dataFetched)
+},[dataFetched])
+
   useEffect(() => {
     dispatch(updatePlaygroundQuery(query));
   }, [query]);
@@ -372,7 +380,7 @@ const QueryExecutor = () => {
           id="results-container"
           className="d-flex w-100 justify-content-center"
         >
-          {getTableData()}
+          {dataFetched && getTableData()}
         </div>
       </div>
       {isLoading && <LoadingContainer />}