summaryrefslogtreecommitdiff
path: root/frontend/src/components/WithSuspense.tsx
diff options
context:
space:
mode:
authorAAGaming <aa@mail.catvibers.me>2022-09-09 16:25:52 -0400
committerAAGaming <aa@mail.catvibers.me>2022-09-09 16:25:52 -0400
commitb5b041fdee3cdb3576cd4d1c77580f57da0b6435 (patch)
tree2b63ccb6410868fe4f0c6f3882614d0f7a180be4 /frontend/src/components/WithSuspense.tsx
parent9d980618a78b41bc3262c5185df67ccf6076a296 (diff)
downloaddecky-loader-b5b041fdee3cdb3576cd4d1c77580f57da0b6435.tar.gz
decky-loader-b5b041fdee3cdb3576cd4d1c77580f57da0b6435.zip
add file picker, add library file picker patch, bump lib, logger tweaks
Diffstat (limited to 'frontend/src/components/WithSuspense.tsx')
-rw-r--r--frontend/src/components/WithSuspense.tsx32
1 files changed, 32 insertions, 0 deletions
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;