NotLuksus Posts - Answer Overflow

NotLuksus

Explore posts from servers

SSolidJS TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by NotLuksus on 5/14/2024 in #support

Shared Layouts with SolidStart

I wondered if its possible to have a shared Layout for the routes / and /pricing but not for /dashboard e.g. I have a navbar I want to show only on that routes. From the docs it seems like it's only possible for pages inside folders so /landing/ /landing/pricing having a different layout then /dashboard would work?

3 replies

SSolidJS

•Created by NotLuksus on 5/14/2024 in #support

createAsyncResource and <Suspense>

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

import { createAsync, cache } from "@solidjs/router";
import { For, Suspense } from "solid-js";
import * as edgedb from "edgedb";
import e from "../../dbschema/edgeql-js";

const getTodos = cache(async () => {
    "use server";
    const client = edgedb.createClient();
    //Simulate long running query
    await new Promise((r) => setTimeout(r, 2000));
    return e
        .select(e.Todo, () => ({
            text: true,
            done: true,
        }))
        .run(client);
}, "todos");

export const route = {
    load: () => getTodos(),
};

export default function Page() {
    const todos = createAsync(() => getTodos(), {
        deferStream: true,
    });

    return (
        <div>
            <h1>Todos</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <For each={todos()}>{(todo) => <div>{todo.text}</div>}</For>
            </Suspense>
        </div>
    );
}

I would expect this to first render Todos Loading... for 2 seconds and then all the todos in a list instead of the Loading However when I open the page, the browser loading indicator is there for 2 seconds and then just the "end result" gets rendered in the browser. What am I doing wrong? Quite new to solid so please excuse if this question is dumb haha Thanks for help!

8 replies

Gaming

Programming