Fix INP in Remix

// Blocking form -- user waits for server response
export default function LikeButton({ postId }: { postId: string }) {
  return (
    

      Like
    
  );
  // Button does nothing until server responds (300-500ms)
}

import { useFetcher } from "@remix-run/react";

export default function LikeButton({ postId, liked }: {
  postId: string;
  liked: boolean;
}) {
  const fetcher = useFetcher();

  // Optimistic: assume success immediately
  const isLiked = fetcher.formData
    ? fetcher.formData.get("liked") === "true"
    : liked;

  return (
    
      
      
        {isLiked ? "Liked" : "Like"}
      
    
  );
  // UI updates instantly on click -- INP measured at ~16ms
}

import { useFetcher } from "@remix-run/react";
import { useRef, useCallback } from "react";

export function SearchInput() {
  const fetcher = useFetcher();
  const timeoutRef = useRef();

  const handleInput = useCallback((e: React.ChangeEvent) => {
    // Clear previous timer
    clearTimeout(timeoutRef.current);

    // Wait 300ms after last keystroke before fetching
    timeoutRef.current = setTimeout(() => {
      fetcher.submit(
        { q: e.target.value },
        { method: "get", action: "/api/search" }
      );
    }, 300);
  }, [fetcher]);

  return (
    

      
      {fetcher.data && (
        

          {fetcher.data.results.map((result: any) => (
            
{result.title}
          ))}
        
      )}
    
  );
}

// Utility: yield control back to the browser
function yieldToMain(): Promise {
  return new Promise((resolve) => {
    if (typeof scheduler !== "undefined" && scheduler.yield) {
      // Use scheduler.yield if available (Chrome 115+)
      scheduler.yield().then(resolve);
    } else {
      setTimeout(resolve, 0);
    }
  });
}

// Process large list in chunks
async function processItems(items: Item[]) {
  const CHUNK_SIZE = 50;
  const results: ProcessedItem[] = [];

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    results.push(...chunk.map(processItem));

    // Yield after each chunk so interactions can be processed
    if (i + CHUNK_SIZE < items.length) {
      await yieldToMain();
    }
  }

  return results;
}

import { useNavigation } from "@remix-run/react";

export function GlobalProgress() {
  const navigation = useNavigation();
  const isNavigating = navigation.state !== "idle";

  return (
    

  );
}

/* CSS */
/*
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  width: 0;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.2s;
  z-index: 9999;
}
.progress-bar.active {
  opacity: 1;
  width: 80%;
  animation: progress 2s ease-in-out;
}
*/

import { useEffect } from "react";

export function DeferredAnalytics() {
  useEffect(() => {
    // Load analytics after page is interactive
    const timer = setTimeout(() => {
      const script = document.createElement("script");
      script.src = "https://analytics.example.com/tracker.js";
      script.async = true;
      document.body.appendChild(script);
    }, 3000); // Delay 3 seconds after mount

    return () => clearTimeout(timer);
  }, []);

  return null;
}

// In root.tsx:
//