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"
      }), " erlaubt es uns, einen Platzhalter anzuzeigen, während Daten geladen werden. Das ist toll für das initiale Laden, aber bei folgenden Navigationen ist es meist schlechtere UX, auf einen Platzhalter-Zustand zurückzufallen."]
    }), "\n", jsxs(_components.p, {
      children: ["Wir können es vermeiden, in diesen Platzhalter-Zustand zurückzufallen, indem wir ", jsx(_components.code, {
        children: "useTransition"
      }), " verwenden. Es bietet einen Wrapper und einen Lade-Indikator. Der Wrapper steckt alle darunterliegenden Aktualisierungen in eine Transaktion, die nicht ausgeführt wird, bis alle asynchronen Events vollständig sind."]
    }), "\n", jsxs(_components.p, {
      children: ["Das heisst, wenn der Kontrollfluss unterbrochen ist, zeigt es weiterhin den gegenwärtigen Zweig, während der nächste außerhalb des Dokuments gerendert wird. Ressourcenzugriffe unter existierenden Boundaries werden zu der Transition hinzugefügt. Allerdings werden alle verschachtelten ", jsx(_components.code, {
        children: "Suspense"
      }), "-Komponenten ihren Platzhalter anzeigen, wenn sie nicht fertig geladen waren, bevor sie gerendert wurden."]
    }), "\n", jsxs(_components.p, {
      children: ["Man achte darauf, dass beim Navigieren innerhalb des Beispiels der Inhalt mit einem Lade-Platzhalter wechselt. Fügen wir eine transition zu unserer ", jsx(_components.code, {
        children: "App"
      }), "-Komponente hinzu. Zuerst ersetzen wir die ", jsx(_components.code, {
        children: "updateTab"
      }), "-Funktion:"]
    }), "\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"
      }), " gibt ein pending-Signal zurück und eine Methode, um die Transition zu starten, in die wir unser Update kapseln."]
    }), "\n", jsx(_components.p, {
      children: "Wir sollten das pending-Signal benutzen, um eine Ladeanzeige im Benutzerinterface anzuzeigen. Wir können eine pending-Klasse in unser Tab-Container-div schreiben:"
    }), "\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: "Und schon wird das Umschalten zwischen den Tabs viel flüssiger."
    })]
  });
}
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-176bd658.js.map
