From b5b041fdee3cdb3576cd4d1c77580f57da0b6435 Mon Sep 17 00:00:00 2001
From: AAGaming <aa@mail.catvibers.me>
Date: Fri, 9 Sep 2022 16:25:52 -0400
Subject: add file picker, add library file picker patch, bump lib, logger
 tweaks

---
 frontend/src/components/WithSuspense.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 frontend/src/components/WithSuspense.tsx

(limited to 'frontend/src/components/WithSuspense.tsx')

diff --git a/frontend/src/components/WithSuspense.tsx b/frontend/src/components/WithSuspense.tsx
new file mode 100644
index 00000000..7460aa3d
--- /dev/null
+++ b/frontend/src/components/WithSuspense.tsx
@@ -0,0 +1,32 @@
+import { SteamSpinner } from 'decky-frontend-lib';
+import { FunctionComponent, ReactElement, ReactNode, Suspense } from 'react';
+
+interface WithSuspenseProps {
+  children: ReactNode;
+}
+
+// Nice little wrapper around Suspense so we don't have to duplicate the styles and code for the loading spinner
+const WithSuspense: FunctionComponent<WithSuspenseProps> = (props) => {
+  const propsCopy = { ...props };
+  delete propsCopy.children;
+  (props.children as ReactElement)?.props && Object.assign((props.children as ReactElement).props, propsCopy); // There is probably a better way to do this but valve does it this way so ¯\_(ツ)_/¯
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            marginTop: '40px',
+            height: 'calc( 100% - 40px )',
+            overflowY: 'scroll',
+          }}
+        >
+          <SteamSpinner />
+        </div>
+      }
+    >
+      {props.children}
+    </Suspense>
+  );
+};
+
+export default WithSuspense;
-- 
cgit v1.2.3