From 0f5ad134a6b139506aad37972def2ab8d3910668 Mon Sep 17 00:00:00 2001
From: Rohan-cp <rohancp9@icloud.com>
Date: Sat, 27 Apr 2024 00:12:16 +0530
Subject: [PATCH] add fallback to onboarding recommended users on web (#2434)

---
 apps/web/pages/onboarding/recommend-users.tsx |   9 +-
 .../OnboardingRecommendUsersFallback.tsx      | 118 ++++++++++++++++++
 2 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/scenes/Onboarding/OnboardingRecommendUsersFallback.tsx

diff --git a/apps/web/pages/onboarding/recommend-users.tsx b/apps/web/pages/onboarding/recommend-users.tsx
index bd3fa108bf..e1956d28e4 100644
--- a/apps/web/pages/onboarding/recommend-users.tsx
+++ b/apps/web/pages/onboarding/recommend-users.tsx
@@ -1,5 +1,12 @@
+import { Suspense } from 'react';
+
+import { OnboardingRecommendUsersFallback } from '~/scenes/Onboarding/OnboardingRecommendUsersFallback';
 import { OnboardingRecommendUsersPage } from '~/scenes/Onboarding/OnboardingRecommendUsersPage';
 
 export default function RecommendUsers() {
-  return <OnboardingRecommendUsersPage />;
+  return (
+    <Suspense fallback={<OnboardingRecommendUsersFallback />}>
+      <OnboardingRecommendUsersPage />
+    </Suspense>
+  );
 }
diff --git a/apps/web/src/scenes/Onboarding/OnboardingRecommendUsersFallback.tsx b/apps/web/src/scenes/Onboarding/OnboardingRecommendUsersFallback.tsx
new file mode 100644
index 0000000000..f8fca81851
--- /dev/null
+++ b/apps/web/src/scenes/Onboarding/OnboardingRecommendUsersFallback.tsx
@@ -0,0 +1,118 @@
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+
+import breakpoints from '~/components/core/breakpoints';
+import { HStack, VStack } from '~/components/core/Spacer/Stack';
+
+export function OnboardingRecommendUsersFallback() {
+  return (
+    <StyledFullPageLoader>
+      <StyledContainer gap={20}>
+        <StyledThinSkeleton />
+        <StyledThinSkeleton />
+        <RecommendUsersFallback />
+        <RecommendUsersFallback />
+        <RecommendUsersFallback />
+        <RecommendUsersFallback />
+        <RecommendUsersFallback />
+        <RecommendUsersFallback />
+        <StyledThinSkeleton />
+      </StyledContainer>
+    </StyledFullPageLoader>
+  );
+}
+
+function RecommendUsersFallback() {
+  return (
+    <>
+      <HStack justify="space-between" align="center">
+        <HStack gap={16} align="center">
+          <StyledPfpSkeleton />
+          <VStack gap={8}>
+            <UserDetailsSmall />
+            <UserDetails />
+          </VStack>
+        </HStack>
+        <StyledButtonSkeleton />
+      </HStack>
+    </>
+  );
+}
+
+const StyledFullPageLoader = styled.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-top: 48px;
+
+  @media only screen and ${breakpoints.tablet} {
+    padding: 0;
+    flex-direction: row;
+    margin-top: 0;
+  }
+`;
+
+const StyledContainer = styled(VStack)`
+  width: 100%;
+  margin-top: 24px;
+
+  @media only screen and ${breakpoints.tablet} {
+    margin-top: 56px;
+    padding-right: 10%;
+    padding-left: 10%;
+    width: 400px;
+    margin-left: 46px;
+    margin-top: 0px;
+    padding-right: 0%;
+    padding-left: 0%;
+    width: auto;
+  }
+`;
+
+const StyledPfpSkeleton = styled(Skeleton)`
+  width: 38px;
+  height: 38px;
+  border-radius: 9999px;
+`;
+
+const StyledThinSkeleton = styled(Skeleton)`
+  width: 100%;
+  height: 40px;
+
+  @media only screen and ${breakpoints.tablet} {
+    width: 440px;
+  }
+`;
+
+const UserDetailsSmall = styled(Skeleton)`
+  width: 100%;
+  height: 18px;
+
+  @media only screen and ${breakpoints.tablet} {
+    width: 100px;
+  }
+`;
+
+const UserDetails = styled(Skeleton)`
+  width: 100%;
+  height: 16px;
+
+  @media only screen and ${breakpoints.tablet} {
+    width: 150px;
+  }
+`;
+
+const StyledButtonSkeleton = styled(Skeleton)`
+  width: 100%;
+  height: 32px;
+
+  @media only screen and ${breakpoints.tablet} {
+    width: 110px;
+  }
+`;