import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "Suspense"
      }), " allows us to show fallback content when data is loading. This is great for initial loading, but on subsequent navigation it is often worse UX to fallback to the skeleton state."]
    }), "\n", jsxs(_components.p, {
      children: ["We can avoid going back to the fallback state by leveraging ", jsx(_components.code, {
        children: "useTransition"
      }), ". It provides a wrapper and a pending indicator. The wrapper puts all downstream updates in a transaction that doesn't commit until all async events complete."]
    }), "\n", jsxs(_components.p, {
      children: ["This means that when control flow is suspended, it continues to show the current branch while rendering the next off-screen. Resource reads under existing boundaries add it to the transition. However, any new nested ", jsx(_components.code, {
        children: "Suspense"
      }), " components will show \"fallback\" if they have not completed loading before coming into view."]
    }), "\n", jsxs(_components.p, {
      children: ["Notice when you navigate in the example, we keep seeing the content disappear back to a loading placeholder. Let's add a transition in our ", jsx(_components.code, {
        children: "App"
      }), " component. First, let's replace the ", jsx(_components.code, {
        children: "updateTab"
      }), " function:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [pending, start] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useTransition"
        }), "();\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "updateTab"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "index"
        }), ") => ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "start"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTab"
        }), "(index));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "useTransition"
      }), " returns a pending signal indicator and a method to start the transition, which we will wrap around our update."]
    }), "\n", jsx(_components.p, {
      children: "We should use that pending signal to give an indicator in our UI. We can add a pending class to our tab container div:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: ["<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"tab\""
        }), " classList={{ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "pending"
        }), ": ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pending"
        }), "() }}>\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "And with that our tab switching should be much smoother."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-2c0d1809.js.map
