added real time search

components/layout/Header.tsx

@@ -1,7 +1,7 @@
 // Header.tsx
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { X, Search } from "lucide-react";
@@ -103,12 +103,14 @@ export default function Header({ locale = "ru" }: HeaderProps) {
             </div> */}
 
             {/* Desktop Search Bar */}
-            <SearchBar
-              isMobile={false}
-              searchPlaceholder={t("common.search")}
-              className="hidden flex-1 md:flex "
-              locale={locale}
-            />
+            <Suspense fallback={<div className="hidden flex-1 md:flex h-11 bg-gray-100 rounded-lg" />}>
+              <SearchBar
+                isMobile={false}
+                searchPlaceholder={t("common.search")}
+                className="hidden flex-1 md:flex "
+                locale={locale}
+              />
+            </Suspense>
 
             {/* Action Buttons */}
             <ActionButtons
@@ -121,13 +123,15 @@ export default function Header({ locale = "ru" }: HeaderProps) {
 
       <CategoryMenu isOpen={isCategoryOpen} onClose={closeCategoryMenu} />
 
-      <SearchBar
-        isMobile={true}
-        isOpen={isMobileSearchOpen}
-        onClose={() => setIsMobileSearchOpen(false)}
-        searchPlaceholder={t("common.search")}
-        locale={locale}
-      />
+      <Suspense fallback={null}>
+        <SearchBar
+          isMobile={true}
+          isOpen={isMobileSearchOpen}
+          onClose={() => setIsMobileSearchOpen(false)}
+          searchPlaceholder={t("common.search")}
+          locale={locale}
+        />
+      </Suspense>
 
       <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />