suspensing

packages/app/src/components/Home/Home.tsx

@@ -13,7 +13,11 @@ import {
   Suspense,
 } from 'solid-js';
 import {StateProvider} from 'statebuilder';
-import {getGithubRepo, getGithubRepoWorkflowFiles} from '~/lib/githubApi';
+import {
+  getGithubData,
+  getGithubRepo,
+  getGithubRepoWorkflowFiles,
+} from '~/lib/githubApi';
 import {createScratch} from '../../lib/scratchApi';
 import {getLoggedInUser} from '../../lib/server/appwrite';
 import {CurrentUserBar} from './CurrentUser/CurrentUser';
@@ -33,24 +37,20 @@ import {RepoCardFallback} from './RepoCard/RepoCardFallback';
 import {RepoSearch} from './RepoSearch/RepoSearch';
 import {ScratchList} from './ScratchList/ScratchList';
 
-class SearchRepoError extends Error {
-  constructor(msg: string) {
-    super(msg);
-  }
-}
+export const searchRepo = cache(
+  async (path: string) => getGithubData(path),
+  'search-repo',
+);
 
-export const searchRepo = cache(async (path: string) => {
-  'use server';
-  const result = await getGithubRepo(path);
-  if (result.error) {
-    throw new SearchRepoError(result.error.message);
-  }
-  const files = await getGithubRepoWorkflowFiles(
-    result.data.repo.repo,
-    result.data.repo.defaultBranch,
-  );
-  return {repo: result.data.repo, workflows: files};
-}, 'search-repo');
+export const route = {
+  preload: () => {
+    const [params] = useSearchParams();
+    if (params.repo && typeof params.repo === 'string') {
+      return searchRepo(params.repo);
+    }
+    return null;
+  },
+};
 
 export function Home() {
   const user = createAsync(() => getLoggedInUser(), {deferStream: true});
@@ -65,7 +65,6 @@ export function Home() {
       }
       return searchRepo(repo);
     },
-    {deferStream: true},
   );
 
   const canViewList = createMemo(() => {
@@ -77,13 +76,17 @@ export function Home() {
   return (
     <div class={homeLayoutWrapper}>
       <div class={loggedInBar}>
-        <CurrentUserBar />
+        <Suspense>
+          <CurrentUserBar />
+        </Suspense>
       </div>
 
       <div class={homeContainer}>
         <HomeTitle />
         <div class={content}>
-          <RepoSearch />
+          <Suspense>
+            <RepoSearch />
+          </Suspense>
 
           <ErrorBoundary
             fallback={<div class={errorBanner}>{repo.error?.message}</div>}

packages/app/src/components/Home/RepoSearch/RepoSearch.tsx

@@ -1,7 +1,7 @@
-import {IconButton, TextField} from '@codeui/kit';
-import {createSignal, Show, useTransition} from 'solid-js';
 import {Icon} from '#ui/components/Icon';
+import {IconButton, TextField} from '@codeui/kit';
 import {useSearchParams} from '@solidjs/router';
+import {createSignal, Show, useTransition} from 'solid-js';
 import {
   contentTitle,
   resetRepoSubmitButton,
@@ -11,8 +11,6 @@ import {
   submitRepoSubmitButton,
   wrapper,
 } from './RepoSearch.css';
-import {provideState} from 'statebuilder';
-import {RepoStore} from '../store';
 
 export function RepoSearch() {
   const [searchTextValue, setSearchTextValue] = createSignal<string>('');

packages/app/src/lib/githubApi.ts

@@ -112,3 +112,22 @@ export function getGithubRepoWorkflowFiles(
     );
   });
 }
+
+class SearchRepoError extends Error {
+  constructor(msg: string) {
+    super(msg);
+  }
+}
+
+export async function getGithubData(path: string) {
+  'use server';
+  const result = await getGithubRepo(path);
+  if (result.error) {
+    throw new SearchRepoError(result.error.message);
+  }
+  const files = await getGithubRepoWorkflowFiles(
+    result.data.repo.repo,
+    result.data.repo.defaultBranch,
+  );
+  return {repo: result.data.repo, workflows: files};
+}

packages/app/src/routes/editor/scratch/[id].tsx

@@ -3,10 +3,11 @@ import {
   type RouteDefinition,
   type RouteSectionProps,
 } from '@solidjs/router';
-import {EditorContext} from '~/components/Editor/editor.context';
-import {Editor} from '~/components/Editor/Editor';
+import {Suspense} from 'solid-js';
 import {StateProvider} from 'statebuilder';
-import {Show, Suspense} from 'solid-js';
+import {Editor} from '~/components/Editor/Editor';
+import {EditorContext} from '~/components/Editor/editor.context';
+import {OverlayLoader} from '~/ui/components/Loader/Loader';
 import {getScratch} from '../../../lib/scratchApi';
 
 export const route = {
@@ -19,24 +20,20 @@ export default function EditorPage(props: RouteSectionProps) {
   const workflowContent = createAsync(() => getScratch(props.params.id));
 
   return (
-    <Suspense fallback={<>Loading...</>}>
-      <Show when={workflowContent()}>
-        {workflowContent => (
-          <EditorContext.Provider
-            value={{
-              get source() {
-                return workflowContent().code ?? '';
-              },
-              repository: null,
-              remoteId: props.params.id,
-            }}
-          >
-            <StateProvider>
-              <Editor type={'scratch'} />
-            </StateProvider>
-          </EditorContext.Provider>
-        )}
-      </Show>
+    <Suspense fallback={<OverlayLoader />}>
+      <EditorContext.Provider
+        value={{
+          get source() {
+            return workflowContent()?.code ?? '';
+          },
+          repository: null,
+          remoteId: props.params.id,
+        }}
+      >
+        <StateProvider>
+          <Editor type={'scratch'} />
+        </StateProvider>
+      </EditorContext.Provider>
     </Suspense>
   );
 }

packages/app/src/ui/components/Loader/Loader.module.css

@@ -0,0 +1,32 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: '100%';
+  height: '100%';
+  backdrop-filter: blur(30px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+}

packages/app/src/ui/components/Loader/Loader.tsx

@@ -0,0 +1,13 @@
+import styles from './Loader.module.css';
+
+export function Loader() {
+  return <span class={styles.loader}></span>;
+}
+
+export function OverlayLoader() {
+  return (
+    <div class={styles.overlay}>
+      <Loader />
+    </div>
+  );
+}