ikprk Posts - Answer Overflow

ikprk

•Created by ikprk on 7/29/2024 in #support

createResource blocks navigation

I expect that I'm doing something against Solid rules, but I have no idea no to approach the debug. It seems like createResoure is blocking the UI change till the Promise resolves.

export const SingleExchange = () => {
  const _exchange = useExchangeFromParams()


  const [repositoryQuery] = createResource(
    () => _exchange(),
    (exchange) => {
      if (!exchange) {
        throw Error('No exchange')
      }

      return exchange.fetchBalance()
    },
    {
      name: _exchange()?.name,
    }
  )

  debug(repositoryQuery)
  debug(_exchange)

  return (
    <RepositoryWrapper>
      // some UI for data
      {repositoryQuery()?.name}
    </RepositoryWrapper>
  )
}

export const useExchangeFromParams = () => {
  const params = useParams();
  const {
    exchangesService: { exchanges },
  } = useStore();

  return () => {
    return exchanges.find((e) => e.name === params.name);
  };
};

export const SingleExchange = () => {
  const _exchange = useExchangeFromParams()


  const [repositoryQuery] = createResource(
    () => _exchange(),
    (exchange) => {
      if (!exchange) {
        throw Error('No exchange')
      }

      return exchange.fetchBalance()
    },
    {
      name: _exchange()?.name,
    }
  )

  debug(repositoryQuery)
  debug(_exchange)

  return (
    <RepositoryWrapper>
      // some UI for data
      {repositoryQuery()?.name}
    </RepositoryWrapper>
  )
}

export const useExchangeFromParams = () => {
  const params = useParams();
  const {
    exchangesService: { exchanges },
  } = useStore();

  return () => {
    return exchanges.find((e) => e.name === params.name);
  };
};

RepositoryWrapper is just HOC with error boundary and suspense. The problem is that when I refersh the page I can normally navigate between different exchanges without any delays, after one of them resolves. If one of exchanges is already resolved, next click on navigation that results in url param to change, I can see http request being sent for new view, but UI only changes after they resolve.

4 replies

SSolidJS

•Created by ikprk on 7/23/2024 in #support

HOC for Suspense and ErrorBoundary

I was wondering whether it's possible to have following component:

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};

export const RepositoryWrapper = ({
  children,
  loading = <div class="text-sky-800 p-4">Loading...</div>,
  error = <div class="text-red-800 p-4">Something went wrong</div>,
}: RepositoryWrapperProps) => {
  return (
    <ErrorBoundary fallback={error}>
      <Suspense fallback={loading}>{children()}</Suspense>
    </ErrorBoundary>
  );
};

and use it without having to pass the children as function. If I try to do pass children as a JSX element, both Suspense and ErrorBoundary arent used at all.

3 replies

Gaming

Programming