Use Suspense for Image loading to reduce the cognitive overload in th…

…e code and also utilize the react18 concurrent rendering Signed-off-by: MTRNord <[email protected]> Fix formatting Signed-off-by: MTRNord <[email protected]>
nordeck · Nov 13, 2024 · 03ac11f · 03ac11f
1 parent b7d3906
commit 03ac11f
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 218 deletions.
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -36,13 +36,15 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.9",
+    "react-error-boundary": "^4.1.2",
     "react-hotkeys-hook": "^4.5.0",
     "react-i18next": "^15.0.1",
     "react-joyride": "^2.9.2",
     "react-redux": "^9.1.2",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.5.1",
     "rxjs": "^7.8.1",
+    "swr": "^2.2.5",
     "tinycolor2": "^1.6.0",
     "yjs": "^13.6.19"
   },
@@ -73,13 +75,13 @@
     "i18next-parser": "^9.0.2",
     "i18next-resources-to-backend": "^1.2.1",
     "jsdom": "^25.0.1",
+    "pdfjs-dist": "^4.6.82",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",
     "vitest": "^2.1.4",
     "vitest-fetch-mock": "^0.4.1",
-    "yarn-deduplicate": "^6.0.2",
-    "pdfjs-dist": "^4.6.82"
+    "yarn-deduplicate": "^6.0.2"
   },
   "scripts": {
     "build": "tsc",

diff --git a/packages/react-sdk/src/components/Whiteboard/Element/ConnectedElement.tsx b/packages/react-sdk/src/components/Whiteboard/Element/ConnectedElement.tsx
@@ -15,26 +15,32 @@
  */
 
 import { useWidgetApi } from '@matrix-widget-toolkit/react';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Elements } from '../../../state/types';
 import { useElementOverride } from '../../ElementOverridesProvider';
 import EllipseDisplay from '../../elements/ellipse/Display';
 import ImageDisplay from '../../elements/image/ImageDisplay';
+import { ImagePlaceholder } from '../../elements/image/ImagePlaceholder';
+import { Skeleton } from '../../elements/image/Skeleton';
 import LineDisplay from '../../elements/line/Display';
 import PolylineDisplay from '../../elements/polyline/Display';
 import RectangleDisplay from '../../elements/rectangle/Display';
 import TriangleDisplay from '../../elements/triangle/Display';
 
-export const ConnectedElement = ({
-  id,
-  readOnly = false,
-  activeElementIds = [],
-  overrides = {},
-}: {
-  id: string;
-  readOnly?: boolean;
-  activeElementIds?: string[];
-  overrides?: Elements;
-}) => {
+export const ConnectedElement = (
+  {
+    id,
+    readOnly = false,
+    activeElementIds = [],
+    overrides = {},
+  }: {
+    id: string;
+    readOnly?: boolean;
+    activeElementIds?: string[];
+    overrides?: Elements;
+  }
+) => {
   const widgetApi = useWidgetApi();
   const element = useElementOverride(id);
   const isActive =
@@ -72,11 +78,34 @@ export const ConnectedElement = ({
       }
 
       return (
-        <ImageDisplay
-          baseUrl={widgetApi.widgetParameters.baseUrl}
-          {...element}
-          {...otherProps}
-        />
+        <Suspense
+          fallback={
+            <Skeleton
+              data-testid={`element-${otherProps.elementId}-skeleton`}
+              x={element.position.x}
+              y={element.position.y}
+              width={element.width}
+              height={element.height}
+            />
+          }
+        >
+          <ErrorBoundary
+            fallback={
+              <ImagePlaceholder
+                position={element.position}
+                width={element.width}
+                height={element.height}
+                elementId={otherProps.elementId}
+              />
+            }
+          >
+            <ImageDisplay
+              baseUrl={widgetApi.widgetParameters.baseUrl}
+              {...element}
+              {...otherProps}
+            />
+          </ErrorBoundary>
+        </Suspense>
       );
     }
   }