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: ["Sometimes you have multiple ", jsx(_components.code, {
        children: "Suspense"
      }), " Components that you want to coordinate. One possible approach is to put everything under a single ", jsx(_components.code, {
        children: "Suspense"
      }), ", but that limits us to a single loading behavior. A single fallback state means that everything always needs to wait until the last thing is loaded. Instead, Solid introduces the ", jsx(_components.code, {
        children: "SuspenseList"
      }), " Component to coordinate that."]
    }), "\n", jsxs(_components.p, {
      children: ["Consider having multiple ", jsx(_components.code, {
        children: "Suspense"
      }), " components like our example. If we wrap them with a ", jsx(_components.code, {
        children: "SuspenseList"
      }), " configured with ", jsx(_components.code, {
        children: "revealOrder"
      }), " of ", jsx(_components.code, {
        children: "forwards"
      }), ", they will render in the order they appear in the tree regardless of the order they load. This reduces the page jumping around. You can set ", jsx(_components.code, {
        children: "revealOrder"
      }), " to ", jsx(_components.code, {
        children: "backwards"
      }), " or ", jsx(_components.code, {
        children: "together"
      }), ", which, respectively, reverses the order or waits for all Suspense Components to load. In addition there is a ", jsx(_components.code, {
        children: "tail"
      }), " option that can be set to ", jsx(_components.code, {
        children: "hidden"
      }), " or ", jsx(_components.code, {
        children: "collapsed"
      }), ". This overrides the default behavior of showing all fallbacks with either showing none or showing the next one in the direction set by ", jsx(_components.code, {
        children: "revealOrder"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Our example currently is a bit of a mess in terms of loading placeholders. While it loads all the data independently we are often showing multiple placeholders depending on the order data loads in. Let's wrap our ", jsx(_components.code, {
        children: "ProfilePage"
      }), " component's JSX in a ", jsx(_components.code, {
        children: "<SuspenseList>"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "SuspenseList"
        }), " revealOrder=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"forwards\""
        }), " tail=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"collapsed\""
        }), ">\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ProfileDetails"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "user"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.user}"
            }), " />"]
          })
        }), "\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fallback"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{"
            }), "<", jsx(_components.span, {
              className: "hljs-attr",
              children: "h2"
            }), ">"]
          }), "Loading posts...", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h2"
            }), ">"]
          }), "}>\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ProfileTimeline"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "posts"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.posts}"
            }), " />"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), ">"]
          })]
        }), "\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fallback"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{"
            }), "<", jsx(_components.span, {
              className: "hljs-attr",
              children: "h2"
            }), ">"]
          }), "Loading fun facts...", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h2"
            }), ">"]
          }), "}>\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ProfileTrivia"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "trivia"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.trivia}"
            }), " />"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Suspense"
            }), ">"]
          })]
        }), "\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "SuspenseList"
        }), ">\n"]
      })
    })]
  });
}
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-958d89ab.js.map
