How make crud page with modals?

Yes, I need a more detailed explanation. I use it. Select you have users, you have roles (space). I need dictionaries with roles to be loaded to the main page via the controller for subsequent filtering. Using the create/edit route, I load either an empty modal or a modal with props embedded in it by sending Inertia::render to the same page with additional modal array data. How to do all these routes correctly and how to organize the architecture and code correctly? I noticed that when loading the create/edit pages, if we upload all the data again, there is a delay.

A modal is just a UI component on a page. It doesn't require any special architecture. You can implement normal CRUD routes while controlling the modal state in the UI code.

How to do all these routes correctly and how to organize the architecture and code correctly?

You're asking for someone to design the feature for you without seeing any of your code. If you want pointers, you're more likely to get help if you post your current solution.

I noticed that when loading the create/edit pages, if we upload all the data again, there is a delay.

What do you mean by this? There's always some delay when submitting data or loading pages over the internet.

My controller:

class RoleController extends Controller
{
    public function index(GetRolesQuery $query, GetRoleDictionariesQuery $dict): Response
    {
        $this->authorize('viewAny', Role::class);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => null,
        ]);
    }

    public function create(GetRolesQuery $query, GetRoleDictionariesQuery $dict): Response
    {
        $this->authorize('create', Role::class);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => [
                'type' => 'create',
                'backlink' => route('roles.index'),
            ],
        ]);
    }

    public function store(CreateRoleAction $action, StoreRoleRequest $request): RedirectResponse
    {
        $this->authorize('create', Role::class);

        $result = $action->handle($request->validated());

        Flash::success("Роль {$result->title} успешно создана");

        return redirect()->route('roles.index');
    }

    public function edit(GetRolesQuery $query, GetRoleDictionariesQuery $dict, Role $role): Response
    {
        $this->authorize('update', $role);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => [
                'type' => 'edit',
                'role' => $role->load('permissions'),
                'backlink' => route('roles.index'),
            ],
        ]);
    }

    public function update(UpdateRoleAction $action, UpdateRoleRequest $request, Role $role): RedirectResponse
    {
        $this->authorize('update', $role);

        $result = $action->handle($role, $request->validated());

        Flash::success("Роль {$result->title} успешно обновлена");

        return redirect()->route('roles.index');
    }

    public function destroy(DeleteRoleAction $action, Role $role): RedirectResponse
    {
        $this->authorize('delete', $role);

        try {
            $action->handle($role);

            Flash::success("Роль {$role->title} успешно удалена");
        } catch (\DomainException $e) {
            Flash::error($e->getMessage());
        }

        return redirect()->route('roles.index');
    }
}

Vue page:

<script setup>
    const props = defineProps({
        roles: {
            type: Object,
            default: () => ({})
        },
        modal: {
            type: Object,
            default: () => ({})
    })

    function createRecord() {
        router.get(
            route('roles.create', props.filters),
            {},
            {
                preserveScroll: true
            }
        )
    }

    function editRecord(item) {
        router.get(
            route('roles.edit', { role: item.id, ...props.filters }),
            {},
            {
                preserveScroll: true
            }
        )
    }

    function deleteRecord(item) {
        router.delete(route('roles.destroy', { role: item.id }), {
            preserveScroll: true
        })
    }

    function closeModal() {
        router.get(
            route('roles.index', props.filters),
            {},
            {
                replace: true,
                preserveScroll: true
            }
        )
    }
</script>

<template>
	<example-table :items="roles"  :items-length="roles.total"/>
	 <roles-modal v-if="modal" :modal="modal" @close="closeModal" />
<template/>

This works, but this approach reloads the page, and if the table is complex or has a lot of data, it takes significantly longer to load.

As I mentioned above, I tried using Ajax requests, but then the application starts using two approaches: one is Ajax, the other is Inertia.

This works, but this approach reloads the page and if the table is complex or there is a lot of data, it takes a noticeable amount of time to load.

I have also tried loading additional data using only[] and preserveUrl, but when validation errors occur, the page breaks instantly due to Laravel's back() function.

It looks interesting. But how can I make vue open the page as a modal? Using additional resolve?