effect of disappearing text on input

apps/web/app/(dash)/home/filterSpaces.tsx

@@ -49,7 +49,7 @@ export function FilterSpaces({
 						<button
 							key={v.id}
 							onClick={() => handleSelect(v)}
-							className="bg-[#3a4248] max-w-32 truncate-wor truncate whitespace-nowrap py-1 rounded-md px-2 mx-1 aria-selected:outline"
+							className="bg-[#3a4248] text-white max-w-32 truncate-wor truncate whitespace-nowrap py-1 rounded-md px-2 mx-1 aria-selected:outline"
 						>
 							{v.name}
 						</button>

apps/web/app/(dash)/home/heading.tsx

@@ -9,18 +9,17 @@ const headings = [
 	"The smart way to use your digital treasure.",
 ];
 
-export function Heading({ query = "" }: { query?: string }) {
+export function Heading({ queryPresent }: { queryPresent: boolean }) {
 	const [showHeading, setShowHeading] = useState<number>(0);
-
 	useEffect(() => {
 		setShowHeading(Math.floor(Math.random() * headings.length));
-	});
+	}, []);
 	return (
 		<div className="h-[3.4rem] overflow-hidden text-white text-center">
 			<motion.h1
-				animate={{ opacity: query ? 0 : 1, y: query ? "20%" : 0 }}
+				animate={{ opacity: queryPresent ? 0 : 1, y: queryPresent ? "20%" : 0 }}
 				className={`text-[2.45rem] font-semibold ${
-					query ? "opacity-0 " : "opacity-100"
+					queryPresent ? "pointer-events-none" : "pointer-events-auto"
 				} transition-opacity`}
 			>
 				{headings[showHeading]}

apps/web/app/(dash)/home/page.tsx

@@ -28,6 +28,8 @@ function Page({
 
 	const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
 
+	const [queryPresent, setQueryPresent] = useState<boolean>(false);
+
 	useEffect(() => {
 		// telegram bot
 		const telegramUser = searchParams.extension as string
@@ -56,9 +58,10 @@ function Page({
 
 	return (
 		<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
-			<Heading />
+			<Heading queryPresent={queryPresent} />
 			<div className="w-full pb-20 mt-12">
 				<QueryInput
+					setQueryPresent={(t:boolean)=> setQueryPresent(t)}
 					handleSubmit={async (q, spaces) => {
 						if (q.length === 0) {
 							toast.error("Query is required");

apps/web/app/(dash)/home/queryinput.tsx

@@ -4,10 +4,12 @@ import React, { useState } from "react";
 import { FilterSpaces } from "./filterSpaces";
 
 function QueryInput({
+	setQueryPresent,
 	initialSpaces,
 	className,
 	handleSubmit,
 }: {
+	setQueryPresent: (t:boolean) => void;
 	initialSpaces?: {
 		id: number;
 		name: string;
@@ -55,7 +57,10 @@ function QueryInput({
 								setQ("");
 							}
 						}}
-						onChange={(e) => setQ(e.target.value)}
+						onChange={(e) => setQ((prev)=> {
+							setQueryPresent(!!(e.target.value.length));
+							return e.target.value;
+						})}
 						value={q}
 					/>
 					<FilterSpaces