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: ["Manchmal hat man mehrere ", jsx(_components.code, {
        children: "Suspense"
      }), "-Komponenten, die man koordinieren möchte. Ein möglicher Ansatz ist, alles unter ein einzelnes ", jsx(_components.code, {
        children: "Suspense"
      }), " zu packen, aber das limitiert uns zu einem einzigen Ladeschritt. Ein einzelner Fallback-Zustand bedeutet, dass alles immer warten muss, bis der letzte Teil geladen ist. Stattdessen bietet Solid die ", jsx(_components.code, {
        children: "SuspenseList"
      }), "-Komponente, um das Laden zu koordinieren."]
    }), "\n", jsxs(_components.p, {
      children: ["Man stelle sich vor, es gibt mehrere ", jsx(_components.code, {
        children: "Suspense"
      }), "-Komponenten wie in unserem Beispiel. Wenn wir sie in eine ", jsx(_components.code, {
        children: "SuspenseList"
      }), " kapseln, die mit der ", jsx(_components.code, {
        children: "revealOrder"
      }), " auf ", jsx(_components.code, {
        children: "forwards"
      }), " eingestellt ist, werden sie in der Reihenfolge, in der sie in der Komponentenstruktur stehen, dargestellt, unabhängig davon, in welcher Reihenfolge sie geladen werden. Das reduziert das Herumspringen der Seite. Man kann ", jsx(_components.code, {
        children: "revealOrder"
      }), " auf ", jsx(_components.code, {
        children: "backwards"
      }), " oder ", jsx(_components.code, {
        children: "together"
      }), " setzen, was die Reihenfolge umkehrt oder wartet, bis alle ", jsx(_components.code, {
        children: "Suspense"
      }), "-Komponenten geladen sind. Zusätzlich gibt es eine ", jsx(_components.code, {
        children: "tail"
      }), "-Option, die man auf ", jsx(_components.code, {
        children: "hidden"
      }), " oder ", jsx(_components.code, {
        children: "collapsed"
      }), " setzen kann. Das überschreibt das normale Verhalten, alle Fallbacks anzuzeigen, damit, kein oder nur das nächste Fallback anzuzeigen, in der Reihenfolge, die ", jsx(_components.code, {
        children: "revealOrder"
      }), " vorgibt."]
    }), "\n", jsxs(_components.p, {
      children: ["Unser Beispiel ist derzeit ein wenig unordentlich, was Lade-Platzhalter angeht. Während es alle Daten unabhängig voneinander lädt, zeigen wir oft mehrere Platzhalter an, je nachdem, in welcher Reihenfolge geladen wird. Schachteln wir unsere ", jsx(_components.code, {
        children: "ProfilePage"
      }), "-Komponenten im JSX in eine ", 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-8291426b.js.map
