Peixe Comments - Answer Overflow

Peixe

Posts Comments

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Hope this helps you!

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Some improvements that can be made: adding onCleanup make the loading element customizable maybe storing getBoundingClientRect on mount instead of on scroll

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

export function isVisible(elm: HTMLElement) {
    const rect = elm.getBoundingClientRect();
    const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return document.body.contains(elm) && !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

export function isVisible(elm: HTMLElement) {
    const rect = elm.getBoundingClientRect();
    const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return document.body.contains(elm) && !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

My fetcher is just a server$ function as I use solid-start

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Load is the method that's called when the user reaches the end and it still has data to load as done by !reachedEnd()

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Loading is if it's currently loading data

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

data is the current data, totalCount is the total amount of data with the current filter (if there's any filter) in the database

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

With that I've used it like this:

const loadingElement = createInfiniteScroll({
        data,
        totalCount,
        loading,
        load: fetch,
})

const loadingElement = createInfiniteScroll({
        data,
        totalCount,
        loading,
        load: fetch,
})

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

import {Refresh} from "~/components/ui/Icon/refresh";
import {Accessor, Component, createMemo, createSignal, JSX, onMount, Show} from "solid-js";
import {isVisible} from "~/lib/utils/element/isVisible";

export type InfiniteScrollProps = {
    data: Accessor<any[] | null | undefined>
    totalCount: Accessor<number | null | undefined>
    loadingComponent?: Component
    load: () => void
    loading: Accessor<boolean>
}

export function createInfiniteScroll(props: InfiniteScrollProps): [isLoading: Accessor<boolean>, loading: JSX.Element] {
    let loadingRef = null as HTMLElement | null
    let loading = props.loadingComponent
        ? <props.loadingComponent ref={loadingRef!}/>
        : <div class='flex flex-row justify-center space-x-2 w-full'>
            <Refresh ref={loadingRef! as unknown as SVGSVGElement} class='animate-spin'/>
            <span>Loading</span>
        </div>

    const loadIfNotLoading = () => {
        if (props.loading()) return
        if (reachedEnd()) return
        props.load()
    }

    const reachedEnd = createMemo(() => props.data()?.length === props.totalCount())

    onMount(() => {
        if (loadingRef && isVisible(loadingRef)) loadIfNotLoading()
        window.addEventListener('scroll', () => {
            if (loadingRef && isVisible(loadingRef)) {
                loadIfNotLoading()
            }
        })
    })

    return (
      <Show when={!reachedEnd()}>
        {loading}
      </Show>
    )
}

import {Refresh} from "~/components/ui/Icon/refresh";
import {Accessor, Component, createMemo, createSignal, JSX, onMount, Show} from "solid-js";
import {isVisible} from "~/lib/utils/element/isVisible";

export type InfiniteScrollProps = {
    data: Accessor<any[] | null | undefined>
    totalCount: Accessor<number | null | undefined>
    loadingComponent?: Component
    load: () => void
    loading: Accessor<boolean>
}

export function createInfiniteScroll(props: InfiniteScrollProps): [isLoading: Accessor<boolean>, loading: JSX.Element] {
    let loadingRef = null as HTMLElement | null
    let loading = props.loadingComponent
        ? <props.loadingComponent ref={loadingRef!}/>
        : <div class='flex flex-row justify-center space-x-2 w-full'>
            <Refresh ref={loadingRef! as unknown as SVGSVGElement} class='animate-spin'/>
            <span>Loading</span>
        </div>

    const loadIfNotLoading = () => {
        if (props.loading()) return
        if (reachedEnd()) return
        props.load()
    }

    const reachedEnd = createMemo(() => props.data()?.length === props.totalCount())

    onMount(() => {
        if (loadingRef && isVisible(loadingRef)) loadIfNotLoading()
        window.addEventListener('scroll', () => {
            if (loadingRef && isVisible(loadingRef)) {
                loadIfNotLoading()
            }
        })
    })

    return (
      <Show when={!reachedEnd()}>
        {loading}
      </Show>
    )
}

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Sorry for making you wait

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Hi @MegaCookie

22 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

Maybe the problem is that you're not calling createComponent when doing renderToString

8 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

This context is initialized when you call createComponent

8 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

All of these depend on sharedConfig and on sharedConfig context serialize function

8 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

The problem is when you use Suspense | ErrorBoundary | @solid/router

8 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

I'm having the same problem

8 replies

SSolidJS

•Created by .torx on 8/24/2023 in #support

Bundling Component SSR Compatible library - sharedConfig is undefined

Interesting

8 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

I ended up making my own infinite scroll

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

Adding the server$ call inside a setTimeout and calling setPages seems to be an ugly workaround

22 replies

SSolidJS

•Created by Dog on 6/26/2023 in #support

createInfiniteScroll from @solid-primitives/pagination with createServerData$ and useRouteData

For some reason when calling the server$ it's removing all the html in body basically

22 replies

Gaming

Programming