Slacker

Slacker is a data-lazy-loading component designed to dramatically improve initial load performance in large applications. It pairs with Observer to run a loader only when the component enters the viewport—deferring expensive API calls or dynamic imports until they are needed. Slacker includes built-in retry and error handling strategies to make deferred loading resilient.

function Slacker<T = any>(props: {
  loader: () => Promise<T> | T;
  children: (data: T) => React.ReactNode;
  loadingFallback?: React.ReactNode;
  errorFallback?: React.ReactNode | ((props: {
    error: Error;
    retry: () => void;
    isLoading: boolean;
  }) => React.ReactNode);
  threshold?: number | number[];
  rootMargin?: string;
  onError?: (error: Error) => void;
  maxRetries?: number;
  retryDelay?: number;
}): React.ReactElement;

Basic usage#

Provide a loader function; when the element becomes visible the loader runs and its result is passed to children. This is ideal for lazy-loading large image sets, widgets, or section-level data.

import { Slacker } from '@ilokesto/utilinent';

function UserProfile({ userId }) {
  return (
    <Slacker
      loader={() => fetch(`/api/users/${userId}`).then(r => r.json())}
      loadingFallback={<Spinner />}
      errorFallback={<ErrorMessage />}
    >
      {(user) => (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
    </Slacker>
  );
}

Error handling & retries#

Pass an errorFallback function to receive the error info and a retry callback for custom UI. Configure maxRetries and backoff settings to automatically retry transient failures.

<Slacker
  loader={fetchData}
  maxRetries={3}
  retryDelay={2000}
  loadingFallback={<Spinner />}
  errorFallback={({ error, retry }) => (
    <div>
      <p>오류: {error.message}</p>
      <button onClick={retry}>재시도</button>
    </div>
  )}
  onError={(err) => console.error('Failed to load:', err)}
>
  {(data) => <Content data={data} />}
</Slacker>