u

src/components/manifest/OrderList.jsx

@@ -548,17 +548,6 @@ export class OrderList extends PureComponent {
   render() {
     const { items, partiesById, busyId } = this.state;
 
-    if (items === null) {
-      if (orderAutomat.state.status === 'failed') {
-        return <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />;
-      }
-      return (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
-          <CircularProgress />
-        </Box>
-      );
-    }
-
     rowContext.partiesById = partiesById;
     rowContext.busyId = busyId;
     rowContext.onOpen = this.handleOpen;
@@ -566,18 +555,31 @@ export class OrderList extends PureComponent {
     rowContext.onTogglePaid = this.handleTogglePaid;
     rowContext.onToggleDelivered = this.handleToggleDelivered;
 
+    if (items === null && orderAutomat.state.status === 'failed') {
+      return (
+        <>
+          <OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
+          <PanelTileGrid>
+            <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ p: 2 }}>
+              <BackendError error={backendErrorFrom(orderAutomat.state.error)} onRetry={this.handleRetry} />
+            </PanelTile>
+          </PanelTileGrid>
+        </>
+      );
+    }
+
     return (
       <>
         <OrderSearchField inputRef={this.searchRef} onCreate={this.handleCreate} />
         <PanelTileGrid>
-          <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0 }}>
+          <PanelTile wide={3} minHeight={0} color={cfg.listColor} sx={{ pb: 0, position: 'relative' }}>
             <FillSpace
               aboveRef={[this.searchRef]}
               reserveBottom={32}
               minPageSize={8}
               minHeight={0}
-              items={items}
-              totalCount={items.length}
+              items={items || []}
+              totalCount={items ? items.length : 0}
               renderItem={OrderRow}
               virtualScrollbar
               header={
@@ -611,6 +613,24 @@ export class OrderList extends PureComponent {
               }
               onPageChange={this.handlePageChange}
             />
+            {items === null && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: 52,
+                  left: 0,
+                  right: 0,
+                  bottom: 32,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  pointerEvents: 'none',
+                  zIndex: 2,
+                }}
+              >
+                <CircularProgress size={32} />
+              </Box>
+            )}
           </PanelTile>
         </PanelTileGrid>
       </>