@blocklet/payment-react 1.25.10 → 1.26.0

package/src/checkout-v2/views/loading-view.tsx

@@ -0,0 +1,162 @@
+import { Box } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
+import Header from '@blocklet/ui-react/lib/Header';
+
+interface LoadingViewProps {
+  mode?: string;
+}
+
+// Pulsing dots — minimal loading indicator
+function PulsingDots() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, mt: 4 }}>
+      {[0, 1, 2].map((i) => (
+        <Box
+          key={i}
+          sx={{
+            width: 12,
+            height: 12,
+            borderRadius: '50%',
+            bgcolor: 'primary.main',
+            opacity: 0.4,
+            animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
+            '@keyframes pulse': {
+              '0%, 80%, 100%': { transform: 'scale(0.6)', opacity: 0.3 },
+              '40%': { transform: 'scale(1)', opacity: 0.7 },
+            },
+          }}
+        />
+      ))}
+    </Box>
+  );
+}
+
+// Reuse the same blob decoration as error-view (without wireframe mesh for simplicity)
+function LoadingDecoration() {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: { xs: 160, md: 200 },
+        height: { xs: 160, md: 200 },
+      }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: '38% 62% 63% 37% / 41% 44% 56% 59%',
+          background: (t) =>
+            `linear-gradient(45deg, ${alpha(t.palette.primary.main, 0.1)}, ${alpha(t.palette.primary.main, 0.03)})`,
+          filter: 'blur(1px)',
+          animation: 'spin 20s linear infinite',
+          '@keyframes spin': { from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' } },
+        }}
+      />
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: '38% 62% 63% 37% / 41% 44% 56% 59%',
+          background: (t) =>
+            `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.07)}, ${alpha(t.palette.primary.main, 0.01)})`,
+          filter: 'blur(1px)',
+          transform: 'scale(0.88)',
+          opacity: 0.6,
+          animation: 'spinReverse 15s linear infinite',
+          '@keyframes spinReverse': {
+            from: { transform: 'scale(0.88) rotate(0deg)' },
+            to: { transform: 'scale(0.88) rotate(-360deg)' },
+          },
+        }}
+      />
+    </Box>
+  );
+}
+
+export default function LoadingView({ mode = 'inline' }: LoadingViewProps) {
+  const isFullScreen = mode === 'standalone';
+  const theme = useTheme();
+  const primaryColor = theme.palette.primary.main;
+
+  // Shared background — must match checkout-layout parent exactly
+  const bgSx = {
+    background: {
+      xs: 'none',
+      md: `linear-gradient(160deg, ${alpha(primaryColor, 0.03)} 0%, ${alpha(primaryColor, 0.07)} 50%, ${alpha(primaryColor, 0.04)} 100%)`,
+    },
+    bgcolor: (t: any) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
+  };
+
+  // Centered content
+  const centerContent = (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+      }}>
+      <LoadingDecoration />
+      <PulsingDots />
+    </Box>
+  );
+
+  if (!isFullScreen) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          width: '100%',
+          minHeight: { xs: 400, md: 640 },
+          maxWidth: 1120,
+          mx: 'auto',
+          borderRadius: '16px',
+          overflow: 'hidden',
+          boxShadow: 1,
+          border: 1,
+          borderColor: 'divider',
+          borderLeft: '4px solid',
+          borderLeftColor: 'primary.main',
+          ...bgSx,
+        }}>
+        {centerContent}
+      </Box>
+    );
+  }
+
+  // Standalone (full-screen) mode
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100vh',
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        overflow: 'hidden',
+        ...bgSx,
+      }}>
+      {/* Header */}
+      <Header
+        sx={{
+          position: 'absolute',
+          top: 20,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          background: 'transparent',
+          '& .header-container': { height: 'auto' },
+        }}
+        hideNavMenu
+        brand={null}
+        description={null}
+        addons={(buildIns: any) =>
+          buildIns.filter((addon: any) => ['locale-selector', 'theme-mode-toggle', 'session-user'].includes(addon.key))
+        }
+      />
+      {centerContent}
+    </Box>
+  );
+}