lazy load comments

Author: EskiMojo14

examples/lazy-injection/kitchen-sink/src/App.tsx

@@ -23,7 +23,9 @@ const App = () => {
           <summary onClick={() => startTransition(toggleCounter)}>
             Counter example (lazy)
           </summary>
-          <Suspense>{counterOpen && <Counter />}</Suspense>
+          <Suspense fallback="Loading counter">
+            {counterOpen && <Counter />}
+          </Suspense>
         </details>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
@@ -32,7 +34,9 @@ const App = () => {
           <summary onClick={() => startTransition(toggleQuotes)}>
             Quotes example (lazy)
           </summary>
-          <Suspense>{quotesOpen && <Quotes />}</Suspense>
+          <Suspense fallback="Loading quotes">
+            {quotesOpen && <Quotes />}
+          </Suspense>
         </details>
         <span>
           <span>Learn </span>

examples/lazy-injection/kitchen-sink/src/app/reducer.ts

@@ -1,12 +1,9 @@
 import { combineSlices } from "@reduxjs/toolkit"
 import { todoSlice } from "../features/todos/todoSlice"
-import { commentSlice } from "../features/todos/commentSlice"
 
 export interface LazyLoadedSlices {}
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
-export const rootReducer = combineSlices(
-  todoSlice,
-  commentSlice,
-).withLazyLoadedSlices<LazyLoadedSlices>()
+export const rootReducer =
+  combineSlices(todoSlice).withLazyLoadedSlices<LazyLoadedSlices>()

examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx

@@ -1,19 +1,24 @@
 import { useAppSelector } from "../../app/hooks"
 import { AddTodo } from "./AddTodo"
-import { Todo } from "./Todo"
 import { selectTodoIds } from "./todoSlice"
 import styles from "./Todos.module.css"
+import { lazily } from "react-lazily"
+import { Suspense } from "react"
+
+const { Todo } = lazily(() => import("./Todo"))
 
 export function Todos() {
   const todoIds = useAppSelector(selectTodoIds)
   return (
     <div className={styles.todos}>
       <AddTodo />
-      <div className={styles.todosList}>
-        {todoIds.map(id => (
-          <Todo key={id} id={id} />
-        ))}
-      </div>
+      <Suspense fallback="Loading todos">
+        <div className={styles.todosList}>
+          {todoIds.map(id => (
+            <Todo key={id} id={id} />
+          ))}
+        </div>
+      </Suspense>
     </div>
   )
 }

examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts

@@ -1,6 +1,8 @@
+import type { WithSlice } from "@reduxjs/toolkit"
 import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit"
 import { createAppSlice } from "../../app/createAppSlice"
 import { deleteTodo } from "./todoSlice"
+import { rootReducer } from "../../app/reducer"
 
 export interface Comment {
   id: string
@@ -49,11 +51,17 @@ export const commentSlice = createAppSlice({
 
 export const { addComment, deleteComment } = commentSlice.actions
 
+declare module "../../app/reducer" {
+  interface LazyLoadedSlices extends WithSlice<typeof commentSlice> {}
+}
+
+const injectedCommentSlice = commentSlice.injectInto(rootReducer)
+
 export const {
   selectAll: selectAllComments,
   selectById: selectCommentById,
   selectEntities: selectCommentEntities,
   selectIds: selectCommentIds,
   selectTotal: selectCommentTotal,
   selectCommentsByTodoId,
-} = commentSlice.selectors
+} = injectedCommentSlice.selectors