* Refactor collaboration library to its own module

* Add Loading Skeleton to Sidebar items

apps/front-end/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // FIXME Collaboration features not working correctly on React.StrictMode
-  reactStrictMode: false,
+  reactStrictMode: true,
 };
 
 module.exports = nextConfig;

apps/front-end/src/app/(auth)/signin/page.tsx

@@ -1,9 +1,10 @@
 "use client";
-import Button from "@/components/Button";
+import Button, { buttonVariants } from "@/components/Button";
 import { DiscordIcon, GithubIcon, GoogleIcon } from "@/components/Icons";
 import Typography from "@/components/Typography";
 import { OAuthProviderType } from "next-auth/providers/oauth-types";
 import { signIn } from "next-auth/react";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { IconType } from "react-icons";
 
@@ -52,6 +53,9 @@ function LoginScreen() {
             <span className="capitalize">{name}</span>
           </Button>
         ))}
+        <Link className={buttonVariants({ variant: "secondary" })} href="/demo">
+          Try it out
+        </Link>
       </div>
     </div>
   );

apps/front-end/src/app/ActiveUsers.tsx

@@ -24,4 +24,5 @@ function ActiveUsers() {
     </div>
   );
 }
+
 export default ActiveUsers;

apps/front-end/src/app/SideNavigation.tsx

@@ -18,7 +18,8 @@ import {
   setLabel,
   sidebarState,
 } from "@/components/Sidebar/state";
-import { useRootDocument } from "@/lib/collaboration";
+import Skeleton from "@/components/Skeleton";
+import { useIsSynced, useRootDocument } from "@/lib/collaboration";
 import { atom, useAtom } from "jotai";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -30,7 +31,7 @@ export const activeItemAtom = atom<Item | null>(null);
 
 function SideNavigation() {
   // Synchorize Yjs shared-types with valtio proxy state
-  useYjs();
+  const loaded = useYjs();
   const router = useRouter();
   const params = useParams<{ notebookId: string; noteId: string }>();
   const [activeItem, setActiveItem] = useAtom(activeItemAtom);
@@ -91,7 +92,7 @@ function SideNavigation() {
       onNewPage={handleNewPage}
     >
       <div className="flex-1 overflow-auto">
-        <SidebarItems />
+        {loaded ? <SidebarItems /> : <SidebarItemsSkeleton />}
       </div>
       <div className="space-y-1">
         <SidebarDivider />
@@ -106,9 +107,22 @@ function SideNavigation() {
 
 function useYjs() {
   const rootDocument = useRootDocument();
+  const isSynced = useIsSynced();
   useEffect(() => {
     return bind(sidebarState, rootDocument.getArray("sidebar"));
   }, [rootDocument]);
+
+  return isSynced;
+}
+
+function SidebarItemsSkeleton() {
+  return (
+    <div className="space-y-1">
+      <Skeleton className="h-12 w-full" />
+      <Skeleton className="h-12 w-full" />
+      <Skeleton className="h-12 w-full" />
+    </div>
+  );
 }
 
 export default SideNavigation;

apps/front-end/src/app/[notebookId]/[noteId]/page.tsx

@@ -13,7 +13,7 @@ async function NotePage({ params }: { params: { noteId: string } }) {
     notFound();
   }
 
-  return <Editor documentId={params.noteId} />;
+  return <Editor collaboration={{ documentId: params.noteId }} />;
 }
 
 export default NotePage;

apps/front-end/src/app/[notebookId]/layout.tsx

@@ -1,12 +1,11 @@
 import { getNotebookById } from "@/actions/document";
 import { getToken } from "@/actions/token";
 import { getSession } from "@/config/auth-options";
+import { StartCollaboration } from "@/lib/collaboration/StartCollaboration";
 import { notFound } from "next/navigation";
 import { PropsWithChildren } from "react";
 import Header from "../Header";
 import SideNavigation from "../SideNavigation";
-import { StartCollaboration } from "@/lib/collaboration";
-import NoSSR from "@/components/NoSSR";
 
 type LayoutProps = PropsWithChildren<{
   params: {
@@ -31,17 +30,15 @@ async function Layout({ children, params }: LayoutProps) {
       <div>
         <Header />
         {session?.user && (
-          <NoSSR>
-            <StartCollaboration
-              user={session.user}
-              notebookName={notebook.document.documentName}
-              initialToken={token}
-              onTokenRefresh={async () => {
-                "use server";
-                return getToken([]);
-              }}
-            />
-          </NoSSR>
+          <StartCollaboration
+            user={session.user}
+            notebookName={notebook.document.documentName}
+            initialToken={token}
+            onTokenRefresh={async () => {
+              "use server";
+              return getToken([]);
+            }}
+          />
         )}
         {children}
       </div>

apps/front-end/src/app/demo/layout.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from "react";
+import Header from "../Header";
+import SideNavigation from "../SideNavigation";
+
+async function Layout({ children }: PropsWithChildren) {
+  return (
+    <div className="grid lg:grid-cols-[20rem_auto]">
+      <aside className="hidden lg:block">
+        <SideNavigation />
+      </aside>
+      <div>
+        <Header />
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Layout;

apps/front-end/src/app/demo/page.tsx

@@ -0,0 +1,7 @@
+import { Editor } from "@/components/Editor";
+
+function Page() {
+  return <Editor />;
+}
+
+export default Page;

apps/front-end/src/components/Editor/Editor.tsx

@@ -32,7 +32,7 @@ const CollaborationPlugin = dynamic(
 const TreeViewPlugin = lazy(() => import("@/plugins/TreeViewPlugin"));
 
 type EditorProps = {
-  documentId: string;
+  collaboration?: { documentId: string };
 };
 
 function Editor(props: EditorProps) {
@@ -56,7 +56,7 @@ function Editor(props: EditorProps) {
             <ContentEditable className="duration-200 ease-in animate-in fade-in-30 focus:outline-none" />
           }
           placeholder={
-            <p className="absolute left-4 top-0 m-0 dark:text-gray-400">
+            <p className="pointer-events-none absolute left-4 top-0 m-0 dark:text-gray-400">
               Press{" "}
               <span className="rounded bg-gray-200 px-2 py-1 dark:bg-slate-800">
                 /
@@ -66,6 +66,7 @@ function Editor(props: EditorProps) {
           }
           ErrorBoundary={ErrorBoundary}
         />
+
         <AutoFocusPlugin />
 
         <LexicalAutoLinkPlugin />
@@ -85,7 +86,9 @@ function Editor(props: EditorProps) {
         <ListMaxIndentLevelPlugin />
         <TabIndentationPlugin />
         <ImagePlugin />
-        <CollaborationPlugin id={props.documentId} />
+        {props.collaboration && (
+          <CollaborationPlugin id={props.collaboration.documentId} />
+        )}
 
         <CheckListPlugin />
       </div>

apps/front-end/src/components/Skeleton.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { ComponentPropsWithoutRef } from "react";
+
+function Skeleton({
+  children,
+  className,
+  ...rest
+}: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...rest}
+      className={clsx("animate-pulse rounded-lg bg-slate-700", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Skeleton;