Handling creating multiple spaces within same component/page (React)

[Keegs12]

I am currently using the spaces SDK and I'm running into some issues with using the SpaceProvider for a specific feature for my teams application. Within in a page (or dialog in our case) we are interacting with a 3d viewing tool to view design files. For each file we would like to have a collaborative "space" using your product. Within the page we have an ability to switch between design files/documents that you can view using the 3d viewing tool. Ideally each design file/document has a space instead of one large one which could create confusion with loads of members potentially viewing several different documents. Using the SpaceProvider opens up for the use of useSpace() which is extremely handy which also seems to open up the useMembers() hook (these are very helpful hooks). However these seem to only be accessible when wrapping components with the SpaceProvider. I am encountering a few issues with the SpaceProvider.

1. SpaceProvider is manually creating a space as soon as I open up the dialog, which isn't the greatest considering it is a choice for a user to enter a space and work collaboratively or simply just individually use the viewer.

2. Secondly with the idea of each document having its own space every time the user chooses to switch within the viewer I'd expect the SpaceProvider which has its name field updating based on the document to update correctly (this is not the case, it is staying as the first space created).

user opens the dialog
const {space} = useSpace();
Space {any: Array(0), events: {…}, anyOnce: Array(0), eventsOnce: {…}, presenceUpdate: ƒ, …}

const {self} = useMembers()
null
^Showcasing the user is not in the space due to the fact that they have not decided to enter it, yet the space was created anyways

useEffect to update name
useEffect(() => {
        if (selectedDocument) {
            setName(`cad-spin-${selectedDocument.id}`);
        } else {
            setName("");
        }
}, [selectedDocument]);

Space provider to wrap the dialog/page
<SpacesProvider client={spaces}>
            <SpaceProvider name={name} key={name}>
                {children}
            </SpaceProvider>
</SpacesProvider>

What instead is required to happen is for the dialog to re-render (im using the key to do this), which in turn causes this flickering when switching between documents (not ideal). This is also now directly coupled with the space being created regardless of the users decision to actually interact with spaces, therefore causing a flicker when just individually using the viewer (not inside a space).

Our ideal and dream solution would be to enter the viewer, users chooses to use spaces, they create or get the space for that document, they then enter it and see all members within that space. User then chooses to switch documents, same sequence applies. Eliminate the re-rendering, allowing for a smooth and UX appropriate flow for the user (ideally allowing us to use you hooks you provide).

How exactly can I get around this? I've noticed it isn't necessary to use the SpaceProvider and gain access to your hooks, but those are very useful, leading to a potential recreation of those hooks to suit my specific use case.

A loom to showcase the problem in more detail.
https://www.loom.com/share/bf4dbf051b5447bdbf8e9a507e620174?sid=ae4f7ba5-b063-4105-8beb-da2eb122f873

[Srushtika]

Thanks for sharing this feedback @Keegs12 - very detailed context, much appreciated. We are discussing this internally and will get back to you soon.