Test to remove suspense from dynamic content manager

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -7,7 +7,80 @@ import ReusableSection from '@/components/modules/reusable-section/reusable-sect
 import Slider from '@/components/modules/slider/slider';
 import USPSection from '@/components/modules/usp-section/usp-section';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import { Suspense } from 'react';
+interface getContentComponentProps {
+  _type: string;
+  _key: number;
+  disabled: boolean;
+}
+
+const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => {
+  let Component: any;
+
+  switch (_type) {
+    case 'hero':
+      if (disabled !== true) {
+        Component = Hero;
+      } else {
+        return;
+      }
+      break;
+    case 'slider':
+      if (disabled !== true) {
+        Component = Slider;
+      } else {
+        return;
+      }
+      break;
+    case 'filteredProductList':
+      if (disabled !== true) {
+        Component = FilteredProductList;
+      } else {
+        return;
+      }
+      break;
+    case 'blurbSection':
+      if (disabled !== true) {
+        Component = BlurbSection;
+      } else {
+        return;
+      }
+      break;
+    case 'uspSection':
+      if (disabled !== true) {
+        Component = USPSection;
+      } else {
+        return;
+      }
+      break;
+    case 'reusableSection':
+      if (disabled !== true) {
+        Component = ReusableSection;
+      } else {
+        return;
+      }
+      break;
+    default:
+      return (
+        <div
+          className={`px-4 lg:px-8 2xl:px-16 ${
+            process.env.NODE_ENV === 'production' ? 'hidden' : ''
+          }`}
+          key={`index-${_key}`}
+        >
+          <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
+            <InformationCircleIcon className="mr-1" />
+            {`No matching component (Type: ${_type})`}
+          </span>
+        </div>
+      );
+  }
+
+  return Component ? (
+    <Component key={`${_key}`} {...rest} />
+  ) : (
+    <div key={`${_key}`}>Something else</div>
+  );
+};
 
 interface dynamicContentManagerProps {
   content: [] | any;
@@ -15,89 +88,7 @@ interface dynamicContentManagerProps {
 
 const DynamicContentManager = ({ content }: dynamicContentManagerProps) => {
   return (
-    <div className="dynamic-content overflow-x-hidden">
+    <div className="dynamic-content overflow-x-hidden">{content?.map(getContentComponent)}</div>
-      {content?.map(
-        (
-          component: { _type: string; _key: number; disabled: boolean; rest: any } | any,
-          index: number
-        ) => {
-          const { _type, _key, disabled, ...rest } = component;
-
-          let Component: any;
-
-          switch (_type) {
-            case 'hero':
-              if (disabled !== true) {
-                Component = Hero;
-              } else {
-                return;
-              }
-              break;
-            case 'slider':
-              if (disabled !== true) {
-                Component = Slider;
-              } else {
-                return;
-              }
-              break;
-            case 'filteredProductList':
-              if (disabled !== true) {
-                Component = FilteredProductList;
-              } else {
-                return;
-              }
-              break;
-            case 'blurbSection':
-              if (disabled !== true) {
-                Component = BlurbSection;
-              } else {
-                return;
-              }
-              break;
-            case 'uspSection':
-              if (disabled !== true) {
-                Component = USPSection;
-              } else {
-                return;
-              }
-              break;
-            case 'reusableSection':
-              if (disabled !== true) {
-                Component = ReusableSection;
-              } else {
-                return;
-              }
-              break;
-            default:
-              return (
-                <div
-                  className={`px-4 lg:px-8 2xl:px-16 ${
-                    process.env.NODE_ENV === 'production' ? 'hidden' : ''
-                  }`}
-                  key={`index-${_key}`}
-                >
-                  <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-                    <InformationCircleIcon className="mr-1" />
-                    {`No matching component (Type: ${_type})`}
-                  </span>
-                </div>
-              );
-          }
-
-          if (Component && index === 0) {
-            return <Component key={`${_key}`} {...rest} />;
-          } else if (Component) {
-            return (
-              <Suspense key={`${_key}`}>
-                <Component {...rest} />
-              </Suspense>
-            );
-          } else {
-            <div key={`${_key}`}>Something else</div>;
-          }
-        }
-      )}
-    </div>
   );
 };