Issues with parallel routing.

[cleo-wvuf]

Summary

I am having a nightmare trying to figure out how to accomplish something that seems to be basic functionality with parallel routing.

I want to have a setup where users can view a list of workflows in a table and the users can click on a table row (or a button or something) to show the details of that workflow next to the table. Inside the details panel there are 2 buttons that call server actions to approve or reject the workflow. Underneath the details there is a comments section.

i have the following routing structure:

workflows/
├── layout.tsx  // Layout to display the different "slots"
├── @table/
│   ├── default.tsx  // Default table (same as page.tsx for direct navigation)
│   ├── page.tsx  // Page to display the table, fetches data via fetch api
│   ├── loading.tsx  // Loading state for table
├── @details/
│   ├── default.tsx  // Shows a skeleton
│   ├── loading.tsx  // Loading state for details
│   ├── [workflowId]/
│   │   ├── page.tsx  // Shows the details on selected workflow, fetches data via fetch api
├── @comments/
│   ├── default.tsx  // Shows a skeleton
│   ├── loading.tsx  // Loading state for comments
│   ├── [workflowId]/
│   │   ├── page.tsx  // Shows the comments on selected workflow, fetches data via fetch api

Currently it is just ultra frustrating trying to determine what will render and when, what is cached and when and what isn't, and differences in navigation via soft and hard. It is beyond complicated. But that is not my major issue (right now).

My major issue is i cannot figure out how to "reset" both the comments and details sections after the server action was executed.

I have tried the following (and practically every variation) in my server action after calling the api endpoint to remove the workflow from the dataset.

    // revalidatePath('/workflows/2')
    revalidatePath("/workflows");

    redirect('/workflows')
    // redirect('/workflows?reset=true')
    // redirect(`/workflows?reset=${Date.now()}`);
    // redirect(`/workflows?cleared=true`);
    // redirect("/workflows/clear");

I also tried everything i could think of on the client side.

function handleActionClick(type: 'reject' | 'approve') {

        startTransition(async () => {

            await workflowActions(workflowId || "2", type);
            // router.push("/workflows");
            // router.refresh();
            // router.replace("/workflows");

        })   
    }

The item is removed from my table and i am redirected back to /workflows, but the details and comments components still display. i cannot figure out how to "reset" them back to their original state (showing placeholder skeletons).

Here is the content of my layout.tsx file which displays the components:

import React, {ReactElement, Suspense} from 'react';
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {DynamicRouteParams} from "@/types/types";


type WorkflowLayoutProps = {
    comments: ReactElement
    table: ReactElement
    details: ReactElement
} & DynamicRouteParams


export default async function Layout({comments, details, table}: WorkflowLayoutProps) {

    // const resolved= await params;
    // console.log(resolved);


    // console.log("table", table)
    // console.log("comments", comments)
    // console.log("details", details)

    // let workflowId = 5;

    // console.log(workflowId);

    return (
        <div className={"flex min-h-screen"}>
            <div className={"container mx-auto justify-center items-center py-36"}>
                <div className={"grid md:grid-cols-3 md:grid-rows-9 gap-6 grid-cols-1 grid-rows-auto max-h-[600px]"}>
                    <div className={"md:col-span-2 md:row-span-9 md:col-start-1 col-span-1"}>
                        <Card className={"h-full"}>
                            <CardHeader>
                                <CardTitle>
                                    Table
                                </CardTitle>
                                <CardDescription>
                                    A table
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <Suspense fallback={<div>Loading from suspense</div>}>
                                    {table}
                                </Suspense>
                            </CardContent>
                        </Card>
                    </div>
                    <div className={"md:col-span-1 md:row-span-6 md:col-start-3 md:row-start-1 col-span-1"}>
                        <Card className={"h-full"}>
                            <CardHeader>
                                <CardTitle>
                                    Details
                                </CardTitle>
                                <CardDescription>
                                    Some details
                                </CardDescription>
                            </CardHeader>
                            <Suspense fallback={<CardContent>
                                <div>Loading from suspense</div>
                            </CardContent>}>
                                {details}
                            </Suspense>

                        </Card>
                    </div>
                    <div className={"md:col-span-1 md:row-span-3 md:col-start-3 col-span-1"}>
                        <Card className={"h-full"}>
                            <CardHeader>
                                <CardTitle>
                                    Comments
                                </CardTitle>
                                <CardDescription>
                                    Some comments
                                </CardDescription>
                            </CardHeader>
                            <CardContent className={"overflow-auto"}>
                                <Suspense fallback={<div>Loading from suspense</div>}>
                                    {comments}
                                </Suspense>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

Am i doing something wrong? Am i fundamentally trying to implement this incorrectly? Any help would be greatly appreciated.

Additional information

No response

Example

I tried making something similar in v0.dev but parallel routing seems to be broken in it. I cant get the slots (besides the table) to even load on the /workflows. When i do try to go to a workflow by clicking on the view link in the table it then takes me to /workflow/[workflowId] but then it shows the default components for details and comments and not their actual components. This is certainly very buggy behavior.

https://v0.dev/chat/next-js-parallel-routing-ytJADPzR8IY?b=b_SvKB2FUYnjX&p=0

added the repo i was testing with here:
https://github.com/chrisl7186/nextjs15-parallel-routes

Judging from the logs (especially after the server action redirect is called) i feel like i did something wrong or something strange is happening.