fix flashing of no-results

Author: Bud-Macaulay

src/components/OptimadeClient/OptimadeQuerier.jsx

@@ -25,6 +25,7 @@ export function OptimadeQuerier({
 }) {
   const [currentFilter, setCurrentFilter] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
+  const [showNoResults, setShowNoResults] = useState(false);
 
   const isCustom = !!customUrl;
 
@@ -170,8 +171,6 @@ export function OptimadeQuerier({
     keepPreviousData: true,
   });
   const results = resultsData?.data ?? [];
-
-  console.log(resultsData)
   const metaData = resultsData?.meta ?? { data_returned: 0, data_available: 0 };
   const totalPages =
     metaData.data_returned != null
@@ -183,6 +182,17 @@ export function OptimadeQuerier({
     setSelectedResult(results[0] ?? null);
   }, [results]);
 
+  useEffect(() => {
+    if (isLoading || selectedResult || !currentFilter) {
+      setShowNoResults(false);
+      return;
+    }
+
+    // delay showing of missing results
+    const timer = setTimeout(() => setShowNoResults(true), 0);
+    return () => clearTimeout(timer);
+  }, [isLoading, selectedResult, currentFilter]);
+
   return (
     <>
       <div className="pt-4 p-2 w-full flex flex-col gap-2 mx-auto max-w-[650px]">
@@ -281,7 +291,7 @@ export function OptimadeQuerier({
           <div className="border-b border-slate-300 py-2" />
 
           {/* No results message */}
-          {!isLoading && !selectedResult && currentFilter && (
+          {showNoResults && (
             <div className="p-2">
               <OptimadeNoResults
                 queryUrl={selectedChild?.base_url}