Question about parallel routes used as modal

[Berzerk3000]

Hi there. I work with next for some years now. For quite some time I wanted to use the intercepting route for some modal interaction. I Have a list view of products and the user could interact with it which would call that intercepting route opening the modal.

While it worked I noticed, when no filter is set, i.e. a lot of interactive cards are on screen (100 at minimum and a loadmore mechanic), the intercepting does take forever. thus making it unusable.

So I could see that it was directly related to the number of elements having a link with an intercepting route.

My question is - did I do something wrong? I.e. is this not meant for these kind of things? more like ONE intercepting route link for an ui panel or similar is the main use for it? I also had the route being dynamic to use params instead of searchparams.

the route was something like "app/[lng]/@modal/(.)media/[id]"

in the modal I just rendered the id. nothing more. so there was nothing going on. I ended up scratching it and just do my own modals as usual.

[ManuLpz4]

Did you find any way to animate the closure of the modal going back?

[remi-k-work]

Hey, here is an example to animate the closure of the modal going back:

"use client";

// react
import { useEffect, useRef, useState } from "react";

// services, features, and other libraries
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "motion/react";

// components
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

// types
import type { ComponentPropsWithoutRef } from "react";

interface DemoModeModalProps extends ComponentPropsWithoutRef<"dialog"> {
  onClosed: () => void;
}

export default function DemoModeModal({ onClosed, className, ...props }: DemoModeModalProps) {
  // To be able to call showModal() method on the dialog
  const dialogRef = useRef<HTMLDialogElement>(null);

  // This allows AnimatePresence to detect when the component should exit
  const [isOpen, setIsOpen] = useState(true);

  useEffect(() => {
    // Show the dialog as a modal
    dialogRef.current?.showModal();
  }, []);

  return (
    <dialog
      ref={dialogRef}
      className={cn(
        "text-foreground fixed inset-0 z-50 grid size-full max-h-none max-w-none place-items-center overflow-hidden overscroll-contain bg-transparent transition-all transition-discrete duration-1000 ease-in-out",
        "not-open:pointer-events-none not-open:invisible not-open:opacity-0 open:pointer-events-auto open:visible open:opacity-100 focus-visible:outline-none",
        "backdrop:backdrop-sepia backdrop:[transition:backdrop-filter_1s_ease]",
        className,
      )}
      // When the dialog is actually closed (by .close() or ESC), it calls the parent's onClosed handler
      onClose={onClosed}
      {...props}
    >
      {/* The onExitComplete callback is crucial. It calls dialog.close() ONLY after the exit animation is done */}
      <AnimatePresence onExitComplete={() => dialogRef.current?.close()}>
        {isOpen && (
          <motion.div
            className="bg-background grid max-h-[min(95dvb,100%)] max-w-[min(96ch,100%)] grid-rows-[auto_1fr_auto] items-start overflow-hidden"
            initial={{ opacity: 0, scale: 0.75 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.75 }}
            transition={{ ease: "easeOut", duration: 0.5 }}
          >
            <Header onClosed={() => setIsOpen(false)} />
            <Content />
            <Footer onClosed={() => setIsOpen(false)} />
          </motion.div>
        )}
      </AnimatePresence>
    </dialog>
  );
}

The trick is to use “AnimatePresence” from "motion/react":
https://motion.dev/docs/react-animate-presence

[Berzerk3000]

I discovered I had to do some virtualization so the elements dont appear in the dom. handling all these components with states etc is not an issue. rendering is. even if the elements are hidden you need to limit the actual dom elements or it will be a shoddy experience.