refactor(client): optimize suspense components

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/hoc/with-fallback.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import React, { Suspense } from 'react';
+
+export function withFallback<P extends object>(
+  Component: React.ComponentType<P>,
+  fallback: ReactNode,
+) {
+  const Wrapped: React.FC<P> = (props) => {
+    return (
+      <Suspense fallback={fallback}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
+
+  Wrapped.displayName = `withFallback(${Component.displayName! || Component.name || 'Component'
+    })`;
+
+  return Wrapped;
+}