Exchange some spinning loader for proceed loader

src/management-system-v2/components/bpmn-viewer.tsx

@@ -8,7 +8,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { useEnvironment } from './auth-can';
 import style from './bpmn-viewer.module.scss';
 import { useLazyRendering } from './scrollbar';
-import ProceedLoading from './loading-proceed';
+import ProceedLoadingIndicator from './loading-proceed';
 
 type BPMNViewerProps = {
   definitionId: string;
@@ -56,7 +56,7 @@ type LazyLoadingBPMNViewerProps = BPMNViewerProps & {
 };
 
 export const LazyBPMNViewer: FC<LazyLoadingBPMNViewerProps> = ({
-  fallback = <ProceedLoading scale="100%" />,
+  fallback = <ProceedLoadingIndicator scale="100%" />,
   ...props
 }) => {
   const ViewerContainerRef = useRef(null);

src/management-system-v2/components/loading-proceed.tsx

@@ -1,10 +1,8 @@
-import React, { FC, useCallback, useMemo, useRef } from 'react';
-import Image from 'next/image';
+import React, { FC, useCallback, useRef, PropsWithChildren } from 'react';
 import style from './loading-proceed.module.scss';
 import { useLazyRendering } from './scrollbar';
 import cn from 'classnames';
 import { v4 as uid } from 'uuid';
-import { ignore } from 'antd/es/theme/useToken';
 
 // '/proceed-icon.png'
 
@@ -14,23 +12,29 @@ type LoadingProps = {
   small?: boolean;
   scale?: string;
   position?: SVGPosition;
+  loading?: boolean;
 };
 
 type SVGPosition = {
-  x?: number;
-  y?: number;
+  x?: number | string;
+  y?: number | string;
 };
 
-const ProceedLoading: FC<LoadingProps> = ({
+const ProceedLoadingIndicator: FC<PropsWithChildren<LoadingProps>> = ({
   width = '250px',
   height /* = '155px' */,
   scale = '100%',
   small = false,
   position = { x: 0, y: 0 },
+  loading = true,
+  children,
 }) => {
   const { x, y } = position;
   const ratioedHeight =
-    height || `${Number.parseInt(`${width}`) * 0.62}px`; /* Ratio of Proceed-Icon */
+    height ||
+    (typeof width == 'number' || (typeof width == 'string' && width.endsWith('px'))
+      ? `${Number.parseInt(`${width}`) * 0.62}px`
+      : `${Number.parseInt(`${width}`) * 0.62}%`); /* Ratio of Proceed-Icon */
 
   /* To ensure there are only visible elements are animated (margin: +- 100% ) */
   const containerRef = useRef<HTMLDivElement>(null);
@@ -62,6 +66,9 @@ const ProceedLoading: FC<LoadingProps> = ({
                 mask: `url(#${maskID}) center/100% no-repeat`,
                 WebkitMask: `url(#${maskID}) center/100% no-repeat`,
                 // maskSize: 'contain', /* This seems not to work with grouped svgs */
+                position: 'relative',
+                top: y,
+                left: x,
               }}
             >
               <div className={cn(style.loadingIndicatorSVG, { [style.visible]: visible })}></div>
@@ -120,7 +127,7 @@ const ProceedLoading: FC<LoadingProps> = ({
     [scale, position],
   );
 
-  return (
+  return loading ? (
     <div
       ref={containerRef}
       style={{
@@ -156,7 +163,9 @@ const ProceedLoading: FC<LoadingProps> = ({
         )}
       </div>
     </div>
+  ) : (
+    children
   );
 };
 
-export default ProceedLoading;
+export default ProceedLoadingIndicator;

src/management-system-v2/components/process-info-card-content.tsx

@@ -5,6 +5,7 @@ import React, { FC, Suspense } from 'react';
 import Viewer from './bpmn-viewer';
 import { ProcessListProcess } from './processes';
 import { useUserPreferences } from '@/lib/user-preferences';
+import ProceedLoadingIndicator from './loading-proceed';
 
 type MetaDataContentType = {
   selectedElement?: ProcessListProcess;
@@ -29,9 +30,10 @@ const MetaDataContent: FC<MetaDataContentType> = ({ selectedElement }) => {
             <>
               <Suspense
                 fallback={
-                  <Spin size="large" tip="Loading Preview">
-                    <div style={{ padding: 50 }} />
-                  </Spin>
+                  // <Spin size="large" tip="Loading Preview">
+                  //   <div style={{ padding: 50 }} />
+                  // </Spin>
+                  <ProceedLoadingIndicator /* small={true} scale="50%" */ />
                 }
               >
                 <Viewer definitionId={selectedElement.id} reduceLogo={true} fitOnResize />

src/management-system-v2/components/processes/index.tsx

@@ -55,6 +55,7 @@ import Ability from '@/lib/ability/abilityHelper';
 import ContextMenuArea from './context-menu';
 import { DraggableContext } from './draggable-element';
 import SelectionActions from '../selection-actions';
+import ProceedLoadingIndicator from '../loading-proceed';
 import { wrapServerCall } from '@/lib/wrap-server-call';
 
 export function canDeleteItems(
@@ -485,7 +486,14 @@ const Processes = ({
                 moveItems(items, over.id);
               }}
             >
-              <Spin spinning={loading}>
+              {/* <Spin spinning={loading}> */}
+              <ProceedLoadingIndicator
+                width={'100%'}
+                scale="60%"
+                // position={{ x: '25%', y: '20%' }}
+                loading={loading}
+                small={true}
+              >
                 {iconView ? (
                   <IconView
                     data={filteredData}
@@ -522,7 +530,8 @@ const Processes = ({
                     />
                   </div>
                 )}
-              </Spin>
+              </ProceedLoadingIndicator>
+              {/* </Spin> */}
             </DraggableContext>
           </div>