How to use @shopify/async - 10 common examples

[
        'You’ve changed the defer strategy on an ',
        'component after it has mounted. This is not supported.',
      ].join(' '),
    );
  }

  let intersection: IntersectionObserverEntry | null = null;
  let intersectionRef: React.Ref = null;

  // Normally this would be dangerous but because we are
  // guaranteed to have thrown if the defer option changes
  // we can be confident that a given use of this hook
  // will only ever hit one of these two cases.
  /* eslint-disable react-hooks/rules-of-hooks */
  if (defer === DeferTiming.InViewport) {
    [intersection, intersectionRef] = useIntersection();
  }
  /* eslint-enable react-hooks/rules-of-hooks */

  const loadRemote = React.useCallback(async () => {
    try {
      setResult({status: Status.Loading});
      const importResult = await load(source, getImport, nonce);

      if (mounted.current) {
        setResult({status: Status.Complete, imported: importResult});
      }
    } catch (error) {
      if (mounted.current) {
        setResult({status: Status.Failed, error});
      }

export function createAsyncContext({
  id,
  load,
}: Options): AsyncContextType {
  const resolver = createResolver({id, load});
  const Context = React.createContext(null);

  // Just like a "normal" value returned from `createContext`, rendering
  // the value itself is not supported. This component is just a placeholder
  // to provide a more useful error.
  function Root() {
    throw new Error(
      'Do not attempt to render the result of calling `createAsyncContext()` directly. Render its `.Provider` component instead.',
    );
  }

  function Provider(props: ProviderProps) {
    const {load, resolved} = useAsync(resolver, {
      assets: AssetTiming.Immediate,
    });

useEffect(() => {
    if (defer == null || defer === DeferTiming.Mount) {
      load();
    } else if (typeof defer === 'function' && defer(props)) {
      load();
    }
  }, [defer, load, props]);

  if (typeof defer === 'function') {
    return null;
  }

  switch (defer) {
    case DeferTiming.Idle:
      return ;
    case DeferTiming.InViewport:
      return (
        
      );
    default:
      return null;
  }
}

renderLoading = defaultRender,
    } = this.props;
    const {resolved, loading} = this.state;

    const effect =
      resolved != null && id != null && manager != null ? (
         manager.markAsUsed(id())}
        />
      ) : null;

    const content = loading ? renderLoading() : render(resolved);

    const intersectionObserver =
      loading && defer === DeferTiming.InViewport ? (
        
      ) : null;

    return (
      <>
        {effect}
        {content}
        {intersectionObserver}
      
    );
  }

React.useEffect(() => {
    if (
      result.status === Status.Initial &&
      defer === DeferTiming.InViewport &&
      intersection &&
      intersection.isIntersecting
    ) {
      loadRemote();
    }
  }, [result, defer, intersection, loadRemote]);

export default function ImportRemote({
  source,
  nonce,
  preconnect,
  getImport,
  onImported,
  defer,
}: Props) {
  const {result, intersectionRef} = useImportRemote(source, {
    defer,
    nonce,
    getImport,
  });

  const intersectionObserver =
    defer === DeferTiming.InViewport && intersectionRef ? (
      <div>} /&gt;
    ) : null;

  React.useEffect(() =&gt; {
    switch (result.status) {
      case Status.Failed:
        onImported(result.error);
        return;
      case Status.Complete:
        onImported(result.imported);
    }
  }, [result, onImported]);

  if (preconnect) {
    const url = new URL(source);
    return (</div>

React.useEffect(() => {
    if (defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        idleCallbackHandle.current = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          loadRemote,
        );
      } else {
        loadRemote();
      }
    } else if (defer === DeferTiming.Mount) {
      loadRemote();
    }

    return () => {
      if (
        idleCallbackHandle.current != null &&
        typeof (window as any).cancelIdleCallback === 'function'
      ) {
        (window as any).cancelIdleCallback(idleCallbackHandle.current);
        idleCallbackHandle.current = null;
      }
    };
  }, [defer, loadRemote, intersection, nonce, getImport, source]);

componentDidMount() {
    if (this.state.resolved != null) {
      return;
    }

    const {defer = DeferTiming.Mount} = this.props;

    if (this.props.defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        this.idleCallbackHandle = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          this.load,
        );
      } else {
        this.load();
      }
    } else if (defer === DeferTiming.Mount) {
      this.load();
    }
  }

componentDidMount() {
    if (this.state.resolved != null) {
      return;
    }

    const {defer = DeferTiming.Mount} = this.props;

    if (this.props.defer === DeferTiming.Idle) {
      if ('requestIdleCallback' in window) {
        this.idleCallbackHandle = (window as WindowWithRequestIdleCallback).requestIdleCallback(
          this.load,
        );
      } else {
        this.load();
      }
    } else if (defer === DeferTiming.Mount) {
      this.load();
    }
  }

useEffect(() => {
    if (defer == null || defer === DeferTiming.Mount) {
      load();
    } else if (typeof defer === 'function' && defer(props)) {
      load();
    }
  }, [defer, load, props]);