Makes loader more responsive

zkemail · Oct 10, 2024 · 95bbed7 · 95bbed7
1 parent d08a1db
commit 95bbed7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,18 +1,22 @@
+"use client";
+
 import DomainSearchResults from "@/components/DomainSearchResults";
 import { SearchInput } from "@/components/SearchInput";
 import Link from "next/link";
+import { useState } from "react";
 
 export default function Home({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
   const domainQuery = searchParams?.domain?.toString();
+  const [isLoading, setIsLoading] = useState(true);
   return (
     <div style={{ display: "flex", minHeight: "100vh", flexDirection: "column", alignItems: "center" }}>
       <h2 style={{ padding: "2rem" }}>
         <Link href="/" className="defaultcolor">
           DKIM Archive
         </Link>
       </h2>
-      <SearchInput domainQuery={domainQuery} />
-      <DomainSearchResults domainQuery={domainQuery} />
+      <SearchInput domainQuery={domainQuery} setIsLoading={setIsLoading} />
+      <DomainSearchResults domainQuery={domainQuery} isLoading={isLoading} setIsLoading={setIsLoading} />
       <div style={{ textAlign: "center", marginTop: "5rem", fontSize: "0.8rem" }}>
         <hr style={{ width: "50%", margin: "1rem auto", borderTop: "1px solid black" }} />
         <div>

diff --git a/src/components/DomainSearchResults.tsx b/src/components/DomainSearchResults.tsx
@@ -7,6 +7,12 @@ import { parseDkimTagList } from "@/lib/utils";
 import { useEffect, useState } from "react";
 import { DomainSearchResultsDisplay } from "./DomainSearchResultsDisplay";
 
+interface DomainSearchResultsProps {
+  domainQuery: string | undefined;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+}
+
 function dkimValueHasPrivateKey(dkimValue: string): boolean {
   return !!parseDkimTagList(dkimValue).p;
 }
@@ -18,8 +24,8 @@ async function DomainResultsLoader(domainQuery: string | undefined) {
   return records;
 }
 
-function DomainSearchResults({ domainQuery }: { domainQuery: string | undefined }) {
-  const [isLoading, setIsLoading] = useState(true);
+function DomainSearchResults({ domainQuery, isLoading, setIsLoading }: DomainSearchResultsProps) {
+  // const [isLoading, setIsLoading] = useState(true);
   const [records, setRecords] = useState<RecordWithSelector[]>([]);
   const [cursor, setCursor] = useState<number | null>(null);
 

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -7,9 +7,10 @@ import debounce from "lodash/debounce"; // Importing lodash's debounce
 
 interface SearchFormProps {
   domainQuery: string | undefined;
+  setIsLoading: (isLoading: boolean) => void;
 }
 
-export const SearchInput: React.FC<SearchFormProps> = ({ domainQuery }) => {
+export const SearchInput: React.FC<SearchFormProps> = ({ domainQuery, setIsLoading }) => {
   const router = useRouter();
   const [searchResults, setSearchResults] = useState<AutocompleteResults>([]);
   const [inputValue, setInputValue] = useState<string>(domainQuery || "");
@@ -37,6 +38,7 @@ export const SearchInput: React.FC<SearchFormProps> = ({ domainQuery }) => {
 
   const onChange = (_event: React.SyntheticEvent, value: string | null) => {
     if (value) {
+      setIsLoading(true);
       router.push(`/?domain=${value}`);
     }
   };