movies updates

examples/movies/src/components/GlobalLoader.scss

@@ -18,7 +18,7 @@
     width: 200%;
     transform: translateX(0);
     opacity: 0;
-    transition: transform 2s ease, opacity 1s ease;
+    transition: transform 1s ease, opacity .5s ease;
     background: #2196f3;
   }
 
@@ -33,20 +33,11 @@
     background: rgba(0, 0, 0, 0.2);
   }
 
-  &.is-initing {
-    .global-loader-fill {
-      transition: none;
-      opacity: 1;
-      animation: Indeterminate 5s ease-out;
-      animation-fill-mode: forwards;
-    }
-  }
-
   &.is-loading {
     .global-loader-fill {
       transition: none;
       opacity: 1;
-      animation: Indeterminate 10s ease-out;
+      animation: Indeterminate 5s ease-out;
       animation-fill-mode: forwards;
     }
   }

examples/movies/src/components/GlobalLoader.tsx

@@ -1,26 +1,22 @@
 "use client";
-import { createSignal, createEffect } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import { isServer } from "solid-js/web";
 
 import "./GlobalLoader.scss";
 
-export default (props) => {
+export default () => {
   const [isVisible, setVisible] = createSignal();
   if (!isServer) {
     window.router.router.addEventListener("navigation-start", e => {
       setVisible(true);
     });
 
     window.router.router.addEventListener("navigation-end", e => {
-      setTimeout(() => {
-        setVisible(false);
-      }, 300)
+      setVisible(false);
     });
 
     window.router.router.addEventListener("navigation-error", e => {
-      setTimeout(() => {
-        setVisible(false);
-      }, 300)
+      setVisible(false);
     });
   }
   return (
@@ -30,4 +26,4 @@ export default (props) => {
       </div>
     </Show>
   );
-};
+};

examples/movies/src/components/Nav.tsx

@@ -1,4 +1,4 @@
-import { A, Outlet } from "solid-start";
+import { A } from "solid-start";
 import HomeIcon from "~icons/ant-design/home-outlined";
 import MagnifierIcon from "~icons/ant-design/search-outlined";
 import MoviesIcon from "~icons/pepicons/clapperboard";
@@ -10,7 +10,7 @@ export default function Nav() {
     <nav class={styles.nav}>
       <ul class="nolist">
         <li class={styles.logo}>
-          <img src="/solidjs.svg" width={48} height={48} alt="solid logo" />
+          <img src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjYgMTU1LjMiPjxwYXRoIGQ9Ik0xNjMgMzVTMTEwLTQgNjkgNWwtMyAxYy02IDItMTEgNS0xNCA5bC0yIDMtMTUgMjYgMjYgNWMxMSA3IDI1IDEwIDM4IDdsNDYgOSAxOC0zMHoiIGZpbGw9IiM3NmIzZTEiLz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjcuNSIgeTE9IjMiIHgyPSIxNTIiIHkyPSI2My41Ij48c3RvcCBvZmZzZXQ9Ii4xIiBzdG9wLWNvbG9yPSIjNzZiM2UxIi8+PHN0b3Agb2Zmc2V0PSIuMyIgc3RvcC1jb2xvcj0iI2RjZjJmZCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzc2YjNlMSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTE2MyAzNVMxMTAtNCA2OSA1bC0zIDFjLTYgMi0xMSA1LTE0IDlsLTIgMy0xNSAyNiAyNiA1YzExIDcgMjUgMTAgMzggN2w0NiA5IDE4LTMweiIgb3BhY2l0eT0iLjMiIGZpbGw9InVybCgjYSkiLz48cGF0aCBkPSJNNTIgMzVsLTQgMWMtMTcgNS0yMiAyMS0xMyAzNSAxMCAxMyAzMSAyMCA0OCAxNWw2Mi0yMVM5MiAyNiA1MiAzNXoiIGZpbGw9IiM1MThhYzgiLz48bGluZWFyR3JhZGllbnQgaWQ9ImIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iOTUuOCIgeTE9IjMyLjYiIHgyPSI3NCIgeTI9IjEwNS4yIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3NmIzZTEiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjNDM3N2JiIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWYzYjc3Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNNTIgMzVsLTQgMWMtMTcgNS0yMiAyMS0xMyAzNSAxMCAxMyAzMSAyMCA0OCAxNWw2Mi0yMVM5MiAyNiA1MiAzNXoiIG9wYWNpdHk9Ii4zIiBmaWxsPSJ1cmwoI2IpIi8+PGxpbmVhckdyYWRpZW50IGlkPSJjIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE4LjQiIHkxPSI2NC4yIiB4Mj0iMTQ0LjMiIHkyPSIxNDkuOCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMzE1YWE5Ii8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzUxOGFjOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzMxNWFhOSIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTEzNCA4MGE0NSA0NSAwIDAwLTQ4LTE1TDI0IDg1IDQgMTIwbDExMiAxOSAyMC0zNmM0LTcgMy0xNS0yLTIzeiIgZmlsbD0idXJsKCNjKSIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI3NS4yIiB5MT0iNzQuNSIgeDI9IjI0LjQiIHkyPSIyNjAuOCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNDM3N2JiIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzFhMzM2YiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFhMzM2YiIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0iTTExNCAxMTVhNDUgNDUgMCAwMC00OC0xNUw0IDEyMHM1MyA0MCA5NCAzMGwzLTFjMTctNSAyMy0yMSAxMy0zNHoiIGZpbGw9InVybCgjZCkiLz48L3N2Zz4=" width={48} height={48} alt="solid logo" />
         </li>
         <li>
           <A href="/" end aria-label="Home">

examples/movies/src/routes/(home).tsx

@@ -36,7 +36,7 @@ export function routeData() {
 export default function Page() {
   const data = useRouteData<typeof routeData>();
   return (
-    <main class="main">
+    <main class="main" $ServerOnly>
       <Show when={data()}>
         <Hero item={data()?.featured} />
         <ListingCarousel

examples/movies/src/routes/[...404].tsx

@@ -1,6 +1,6 @@
 export default function NotFound() {
   return (
-    <main class="w-full p-4 space-y-2">
+    <main class="w-full p-4 space-y-2" $ServerOnly>
       <h1 class="font-bold text-xl">Page Not Found</h1>
     </main>
   );

examples/movies/src/routes/movie/(all)/index.tsx

@@ -30,7 +30,7 @@ export function routeData() {
 export default function Page() {
   const data = useRouteData<typeof routeData>();
   return (
-    <main class="main">
+    <main class="main" $ServerOnly>
       <Show when={data()}>
         <Hero item={data()?.featured} />
         <ListingCarousel

examples/movies/src/routes/movie/[movieId]/(overview)/Credits.tsx

@@ -3,7 +3,7 @@ import { CreditsItem } from "./CreditsItem";
 
 export function Credits(props) {
   return (
-    <div class="listing listing--carousel">
+    <div class="listing listing--carousel" $ServerOnly>
       <div class="listing__head">
         <h2 class="listing__title">Cast</h2>
       </div>

examples/movies/src/routes/movie/[movieId]/photos/index.tsx

@@ -6,7 +6,7 @@ export default function Photos() {
   const params = useParams();
   const data = useMovie(params);
   return (
-    <main>
+    <main $ServerOnly>
       <ImagesSection title={"Backdrops"} images={data()?.item.images.backdrops} />
       <ImagesSection title={"Posters"} images={data()?.item.images.posters} />
     </main>

examples/movies/src/routes/movie/[movieId]/videos/index.tsx

@@ -2,7 +2,7 @@ import { Videos } from "./Videos";
 
 export default function VideosPage() {
   return (
-    <main>
+    <main $ServerOnly>
       <h1>Videos</h1>
       <Videos />
     </main>

examples/movies/vite.config.ts

@@ -8,7 +8,9 @@ export default defineConfig({
       compiler: "solid"
     }),
     solid({
-      experimental: { islands: true, islandsRouter: true }
+      experimental: { islands: true, islandsRouter: true },
+      // adapter: netlify({ edge: true }),
+      ssr: "streaming"
     })
   ]
 });

packages/start/root/assets.tsx

@@ -7,7 +7,7 @@ function flattenIslands(match: ManifestEntry[], manifest: StartManifest, islands
     if (m.type !== "island") return;
     const islandManifest = manifest[m.href];
 
-    if (islandManifest && (!islands || islands.has(m.href))) {
+    if (islandManifest) { //&& (!islands || islands.has(m.href))
       const res = flattenIslands(islandManifest.assets, manifest, islands);
       result.push(...res);
     }