Gate article detail on a store-backed cache so the view paints once.

Sku page loads/caches the article before mounting ArticleView; the view reads sync from StorageManager instead of fetching again.

src/pages/artikel/sku.jsx

@@ -1,62 +1,49 @@
 import { Component } from 'react';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { StorageManagerContext } from '../../api/storageManagerContext';
 import { ArticleView } from '../../components/article';
-import BackendError from '../../components/BackendError';
-import { requireDefined, requireObject } from '../../utils/apiShape';
-import { backendErrorFrom, isBackendFailure } from '../../utils/backendError';
-import { parseCategoryTreeResponse } from '../../store/categorySlice';
-import {
-  artikelDetailPath,
-  resolveArticleTab,
-} from './articleRoute';
 import withSkuRoute from './withSkuRoute';
 
 class ArtikelSkuPage extends Component {
   static contextType = StorageManagerContext;
 
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
     this.state = {
-      data: null,
-      categories: null,
-      rootCategoryId: null,
-      error: null,
-      loading: true,
-      reloadKey: 0,
+      ready:
+        context.getArticle(props.sku) != null &&
+        context.getCategoryState() != null,
     };
-    this._cancelled = false;
   }
 
   componentDidMount() {
-    this._cancelled = false;
     this.installEscape();
-    void this.load();
+    if (!this.state.ready) void this.ensureArticle();
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const { sku, tab: tabParam, navigate } = this.props;
-    const { data, reloadKey } = this.state;
-
-    if (prevProps.sku !== sku || prevState.reloadKey !== reloadKey) {
-      void this.load();
-      return;
-    }
-
-    if (!data) return;
-    const resolved = resolveArticleTab(tabParam, data);
-    if (tabParam !== resolved) {
-      navigate(artikelDetailPath(data, resolved), { replace: true });
+  componentDidUpdate(prevProps) {
+    if (prevProps.sku !== this.props.sku) {
+      const ready =
+        this.context.getArticle(this.props.sku) != null &&
+        this.context.getCategoryState() != null;
+      if (ready !== this.state.ready) this.setState({ ready });
+      if (!ready) void this.ensureArticle();
     }
   }
 
   componentWillUnmount() {
-    this._cancelled = true;
     this.removeEscape();
   }
 
+  async ensureArticle() {
+    await Promise.all([
+      this.context.loadArticle(this.props.sku),
+      this.context.categoryTreePromise,
+      this.context.companyPromise,
+      this.context.authMePromise,
+    ]);
+    this.setState({ ready: true });
+  }
+
   installEscape() {
     this._onKeyDown = (e) => {
       if (e.key !== 'Escape') return;
@@ -73,112 +60,10 @@ class ArtikelSkuPage extends Component {
     }
   }
 
-  retry = () => {
-    this.setState((s) => ({ reloadKey: s.reloadKey + 1 }));
-  };
-
-  async load() {
-    const { sku } = this.props;
-    const store = this.context;
-
-    if (!sku) {
-      this.setState({
-        error: 'Keine Artikelnr. angegeben',
-        data: null,
-        categories: null,
-        rootCategoryId: null,
-        loading: false,
-      });
-      return;
-    }
-
-    this._cancelled = false;
-    this.setState({ loading: true, error: null });
-
-    try {
-      const [res, treeData, companies, session] = await Promise.all([
-        store.article.get(sku),
-        store.categoryTreePromise,
-        store.companyPromise,
-        store.authMePromise,
-      ]);
-      requireObject(res, 'GET /api/article/:sku');
-      requireObject(res.article, 'article');
-      const companyId = requireDefined(session.user?.selectedCompanyId, 'selectedCompanyId');
-      const company = requireDefined(
-        companies.find((c) => c.id === companyId),
-        'company',
-      );
-      const parsed = parseCategoryTreeResponse(treeData, company.rootCategoryId);
-      if (!this._cancelled) {
-        this.setState({
-          data: res.article,
-          categories: parsed.categories,
-          rootCategoryId: parsed.rootCategoryId,
-          error: null,
-          loading: false,
-        });
-      }
-    } catch (err) {
-      if (!this._cancelled) {
-        this.setState({
-          data: null,
-          categories: null,
-          rootCategoryId: null,
-          error: backendErrorFrom(err),
-          loading: false,
-        });
-      }
-    }
-  }
-
-  handleArticleUpdated = (next) => {
-    this.setState({ data: next });
-  };
-
-  handleTabChange = (nextTab) => {
-    const { data } = this.state;
-    this.props.navigate(artikelDetailPath(data, nextTab));
-  };
-
   render() {
-    const { tab: tabParam } = this.props;
-    const { data, categories, rootCategoryId, error, loading } = this.state;
-
-    if (loading) {
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
-
-    if (error) {
-      if (isBackendFailure(error)) {
-        return <BackendError error={error} onRetry={this.retry} />;
-      }
-      return (
-        <Alert severity="error" sx={{ maxWidth: 640 }}>
-          {typeof error === 'string' ? error : error.message}
-        </Alert>
-      );
-    }
-
-    if (!data || categories == null || rootCategoryId == null) return null;
-
-    const tab = resolveArticleTab(tabParam, data);
-    if (tabParam !== tab) return null;
-
-    return (
-      <ArticleView
-        article={data}
-        categories={categories}
-        rootCategoryId={rootCategoryId}
-        tab={tab}
-        onTabChange={this.handleTabChange}
-        onArticleUpdated={this.handleArticleUpdated}
-      />
-    );
+    const { sku, tab } = this.props;
+    if (!this.state.ready) return null;
+    return <ArticleView sku={sku} tab={tab} />;
   }
 }