Connect slows down when clicking through many devices/routes

[sshane]

With Fast 3G network requests pile up and the FPS plummets on desktop. Old connect feels faster, that could be because old connect caches more, but we probably can also just cancel old requests to speed this up another way

[greatgitsby]

solidjs/solid#1258 :-/

[incognitojam]

solidjs/solid#1258 :-/

I don't think you want to abort the resource, you can just abort the fetch, and when the fetch throws the resource will go to the errored state (if it hasn't already been cleaned up)

[greatgitsby]

it would be more convenient if the signal handled it, otherwise we'd need some invasive changes to our request handling

perhaps a generic createAbortableResource could hook into the reactive system and abort the resource fn when the input signal changed 🤔

[greatgitsby]

or, possibly: https://tanstack.com/query/latest/docs/framework/react/guides/query-cancellation

[incognitojam]

Could do something like this

import { createResource, onCleanup, type ResourceOptions, type ResourceReturn } from 'solid-js'

// copied the types from https://docs.solidjs.com/reference/basic-reactivity/create-resource#note-for-typescript-users
function createAbortableResource<T, U>(
  source: U | false | null | (() => U | false | null),
  fetcher: (source: U, signal: AbortSignal, info: { value: T | undefined; refetching: boolean | unknown }) => T | Promise<T>,
  options?: ResourceOptions<T, U>,
): ResourceReturn<T> {
  return createResource(
    source,
    (source, info) => {
      const controller = new AbortController()
      onCleanup(() => controller.abort())  // trigger abort signal on cleanup (when source changes)
      return fetcher(source, controller.signal, info)
    },
    options,
  )
}

Using it like this (but we'd have to tweak our api methods...)

import { fetcher } from '~/api'
import type { Device } from '~/api/types'

const getDevice = (dongleId: string, signal?: AbortSignal) =>
  fetcher<Device>(`/v1.1/devices/${dongleId}/`, { signal })

const props = { dongleId: 'abc' }
const [data] = createAbortableResource(() => props.dongleId, getDevice)

[greatgitsby]

yeah this is what i was thinking, too

[greatgitsby]

doesn't feel bad on 3G with #539 except video never loads. old connect is the same way