chore: revert

vikejs · Dec 7, 2023 · d5d58db · d5d58db
1 parent 54ea098
commit d5d58db
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/examples/basic/pages/index/+Page.tsx b/examples/basic/pages/index/+Page.tsx
@@ -1,4 +1,4 @@
-import { Counter } from "./Counter";
+import { ClientOnly } from "vike-solid/ClientOnly";
 
 export default function Page() {
   return (
@@ -7,9 +7,23 @@ export default function Page() {
       This page is:
       <ul>
         <li>Rendered to HTML.</li>
-        <li>
-          Interactive. <Counter />
-        </li>
+
+        <ClientOnly load={() => import("./Counter")} fallback={<li>Waiting for client-side only component to load (quick)</li>}>
+          {(Counter) => <li>
+            Interactive 1. <Counter />
+          </li>}
+        </ClientOnly>
+
+        <ClientOnly load={async () => {
+          // Wasting time to show the fallback
+          await new Promise(resolve => setTimeout(resolve, 2000));
+
+          return import("./Counter");
+        }} fallback={<li>Waiting for client-side only component to load (slow)</li>}>
+          {(Counter) => <li>
+            Interactive 2. <Counter />
+          </li>}
+        </ClientOnly>
       </ul>
     </>
   );

diff --git a/examples/basic/pages/index/Counter.tsx b/examples/basic/pages/index/Counter.tsx
@@ -1,8 +1,6 @@
 import { createSignal } from "solid-js";
 
-export { Counter };
-
-function Counter() {
+export default function Counter() {
   const [count, setCount] = createSignal(0);
 
   return (

diff --git a/vike-solid/components/ClientOnly.tsx b/vike-solid/components/ClientOnly.tsx
@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js";
-import { createEffect, createSignal, lazy, startTransition } from "solid-js";
+import { createEffect, createSignal, lazy, Suspense } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
 function ClientOnlyError() {
@@ -11,7 +11,7 @@ export function ClientOnly<T>(props: {
   children: (Component: Component<T>) => JSX.Element
   fallback: JSX.Element
 }) {
-  const [getComponent, setComponent] = createSignal<Component<unknown>>(() => props.fallback);
+  const [getComponent, setComponent] = createSignal<Component<unknown> | undefined>(undefined);
 
   createEffect(() => {
     const loadComponent = () => {
@@ -28,8 +28,8 @@ export function ClientOnly<T>(props: {
       setComponent(() => Component);
     };
 
-    startTransition(loadComponent);
+    loadComponent();
   });
 
-  return <Dynamic component={getComponent()} />;
+  return <Suspense fallback={props.fallback}><Dynamic component={getComponent()} /></Suspense>;
 }