move loading and place in correct page (codesandbox#3971)

Author: SaraVieira

packages/app/src/app/overmind/effects/gql/dashboard/queries.ts

@@ -84,7 +84,7 @@ export const ownedTemplates: Query<
 `;
 
 export const getTeams: Query<TeamsQuery, TeamsQueryVariables> = gql`
-  query TeamsSidebar {
+  query Teams {
     me {
       teams {
         id

packages/app/src/app/pages/NewDashboard/Components/Loading/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import css from '@styled-system/css';
+import { Element, Text } from '@codesandbox/components';
+
+export const Loading = () => (
+  <Element
+    css={css({
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'sideBar.background',
+      color: 'sideBar.foreground',
+      position: 'absolute',
+      zIndex: 2,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    })}
+  >
+    <Text>Loading</Text>
+  </Element>
+);

packages/app/src/app/pages/NewDashboard/Content/routes/Deleted/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { Element, Text } from '@codesandbox/components';
 import { useOvermind } from 'app/overmind';
-import { SandboxCard } from '../../../Components/SandboxCard';
+import { SandboxCard } from 'app/pages/NewDashboard/Components/SandboxCard';
+import { Loading } from 'app/pages/NewDashboard/Components/Loading';
 
 export const Deleted = () => {
   const {
@@ -16,37 +17,39 @@ export const Deleted = () => {
     actions.dashboard.getDeletedSandboxes();
   }, [actions.dashboard, user]);
 
-  if (loadingPage) {
-    return <Text>loading</Text>;
-  }
-
   return (
-    <Element>
+    <Element style={{ position: 'relative' }}>
       <Text marginBottom={2} block>
         Recently Deleted
       </Text>
       <Text variant="muted" block marginBottom={11}>
         Sandboxes, Templates and Folders are permanently deleted after 30 days{' '}
       </Text>
-      {deletedSandboxesByTime.week.length && (
-        <Element marginBottom={14}>
-          <Text marginBottom={6} block>
-            Archived this week
-          </Text>
-          {deletedSandboxesByTime.week.map(sandbox => (
-            <SandboxCard sandbox={sandbox} key={sandbox.id} />
-          ))}
-        </Element>
-      )}
-      {deletedSandboxesByTime.older.length && (
+      {!loadingPage ? (
         <>
-          <Text marginBottom={6} block>
-            Archived Earlier
-          </Text>
-          {deletedSandboxesByTime.older.map(sandbox => (
-            <SandboxCard sandbox={sandbox} key={sandbox.id} />
-          ))}
+          {deletedSandboxesByTime.week.length && (
+            <Element marginBottom={14}>
+              <Text marginBottom={6} block>
+                Archived this week
+              </Text>
+              {deletedSandboxesByTime.week.map(sandbox => (
+                <SandboxCard sandbox={sandbox} key={sandbox.id} />
+              ))}
+            </Element>
+          )}
+          {deletedSandboxesByTime.older.length && (
+            <>
+              <Text marginBottom={6} block>
+                Archived Earlier
+              </Text>
+              {deletedSandboxesByTime.older.map(sandbox => (
+                <SandboxCard sandbox={sandbox} key={sandbox.id} />
+              ))}
+            </>
+          )}
         </>
+      ) : (
+        <Loading />
       )}
     </Element>
   );

packages/app/src/app/pages/NewDashboard/Content/routes/Drafts/index.tsx

@@ -4,6 +4,7 @@ import { Element, Text } from '@codesandbox/components';
 import { Filters } from 'app/pages/NewDashboard/Components/Filters';
 import { useOvermind } from 'app/overmind';
 import { AutoSizer, List } from 'react-virtualized';
+import { Loading } from 'app/pages/NewDashboard/Components/Loading';
 import { getPossibleTemplates } from '../../utils';
 import { SandboxCard } from '../../../Components/SandboxCard';
 
@@ -25,34 +26,33 @@ export const Drafts = () => {
     actions.dashboard.getDrafts();
   }, [actions.dashboard, user, activeTeam]);
 
-  if (loadingPage) {
-    return <Text>loading</Text>;
-  }
-
-  const filtered = getFilteredSandboxes(draftSandboxes);
-
   function rowRenderer({ key, index, style }) {
     return <SandboxCard sandbox={filtered[index]} key={key} style={style} />;
   }
 
+  const filtered = getFilteredSandboxes(draftSandboxes);
+
   return (
-    <Element style={{ height: '100%' }}>
+    <Element style={{ height: '100%', position: 'relative' }}>
       <Text marginBottom={4} block>
         Drafts
       </Text>
       <Filters possibleTemplates={getPossibleTemplates(draftSandboxes)} />
-      <AutoSizer>
-        {({ height, width }) => (
-          <List
-            width={width}
-            height={height}
-            rowCount={filtered.length}
-            rowHeight={240}
-            rowRenderer={rowRenderer}
-          />
-        )}
-      </AutoSizer>
-      ,
+      {!loadingPage ? (
+        <AutoSizer>
+          {({ height, width }) => (
+            <List
+              width={width}
+              height={height}
+              rowCount={filtered.length}
+              rowHeight={240}
+              rowRenderer={rowRenderer}
+            />
+          )}
+        </AutoSizer>
+      ) : (
+        <Loading />
+      )}
     </Element>
   );
 };

packages/app/src/app/pages/NewDashboard/Content/routes/Recent/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
 import { Text, Element, Grid, Column, Stack } from '@codesandbox/components';
 import css from '@styled-system/css';
-
+import { Loading } from 'app/pages/NewDashboard/Components/Loading';
 import { Filters } from 'app/pages/NewDashboard/Components/Filters';
 import { getPossibleTemplates } from '../../utils';
 import { SandboxCard } from '../../../Components/SandboxCard';
@@ -27,10 +27,6 @@ export const Recent = () => {
 
   const possibleTemplates = getPossibleTemplates(recentSandboxes);
 
-  if (loadingPage) {
-    return <Element>Loading</Element>;
-  }
-
   const Group = ({ title, time }) =>
     getFilteredSandboxes(recentSandboxesByTime[time]).length ? (
       <Element marginBottom={14}>
@@ -56,17 +52,23 @@ export const Recent = () => {
 
   return (
     <>
-      <section>
+      <section style={{ position: 'relative' }}>
         <Stack>
           <Text marginBottom={4} block>
             Recently Modified Sandboxes
           </Text>
           <Filters possibleTemplates={possibleTemplates} />
         </Stack>
-        <Group title="Today" time="day" />
-        <Group title="Last 7 Days" time="week" />
-        <Group title="Earlier this month" time="month" />
-        <Group title="Older" time="older" />
+        {!loadingPage ? (
+          <>
+            <Group title="Today" time="day" />
+            <Group title="Last 7 Days" time="week" />
+            <Group title="Earlier this month" time="month" />
+            <Group title="Older" time="older" />
+          </>
+        ) : (
+          <Loading />
+        )}
       </section>
     </>
   );

packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { useOvermind } from 'app/overmind';
-import { Text, Button, Grid, Column, Element } from '@codesandbox/components';
+import { Text, Button, Grid, Column } from '@codesandbox/components';
 import css from '@styled-system/css';
-import { SandboxCard } from '../../../Components/SandboxCard';
+import { SandboxCard } from 'app/pages/NewDashboard/Components/SandboxCard';
+import { Loading } from 'app/pages/NewDashboard/Components/Loading';
 
 export const StartSandboxes = () => {
   const {
@@ -17,70 +18,78 @@ export const StartSandboxes = () => {
     actions.dashboard.getStartPageSandboxes();
   }, [actions.dashboard, user]);
 
-  if (loadingPage) {
-    return <Element>Loading</Element>;
-  }
-
   return (
     <>
-      <section>
+      <section style={{ position: 'relative' }}>
         <Text marginBottom={4} block>
           Recently used Templates
         </Text>
-        <Grid
-          rowGap={6}
-          columnGap={6}
-          marginBottom={8}
-          css={css({
-            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-          })}
-        >
-          {startPageSandboxes.templates.map(({ sandbox }) => (
-            <Column key={sandbox.id}>
-              <SandboxCard sandbox={sandbox} />
-            </Column>
-          ))}
-        </Grid>
+        {!loadingPage ? (
+          <Grid
+            rowGap={6}
+            columnGap={6}
+            marginBottom={8}
+            css={css({
+              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+            })}
+          >
+            {startPageSandboxes.templates.map(({ sandbox }) => (
+              <Column key={sandbox.id}>
+                <SandboxCard sandbox={sandbox} />
+              </Column>
+            ))}
+          </Grid>
+        ) : (
+          <Loading />
+        )}
       </section>
 
-      <section>
-        <Text marginBottom={4} block>
+      <section style={{ position: 'relative' }}>
+        <Text
+          marginBottom={4}
+          block
+          css={css({ position: 'relative', zIndex: 99 })}
+        >
           Your Recent Sandboxes
         </Text>
-        <Grid
-          rowGap={6}
-          columnGap={6}
-          marginBottom={8}
-          css={css({
-            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-          })}
-        >
-          <Column>
-            <Button
-              variant="link"
-              onClick={() => actions.modalOpened({ modal: 'newSandbox' })}
-              css={css({
-                height: 240,
-                fontSize: 3,
-                border: '1px solid',
-                borderColor: 'grays.600',
-                borderRadius: 'medium',
-                transition: 'all ease-in',
-                transitionDuration: theme => theme.speeds[2],
-                ':hover, :focus': {
-                  transform: 'scale(0.98)',
-                },
-              })}
-            >
-              New Sandbox
-            </Button>
-          </Column>
-          {startPageSandboxes.recent.map(sandbox => (
-            <Column key={sandbox.id}>
-              <SandboxCard sandbox={sandbox} />
+        {!loadingPage ? (
+          <Grid
+            rowGap={6}
+            columnGap={6}
+            marginBottom={8}
+            css={css({
+              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+            })}
+          >
+            <Column>
+              <Button
+                variant="link"
+                onClick={() => actions.modalOpened({ modal: 'newSandbox' })}
+                css={css({
+                  height: 240,
+                  fontSize: 3,
+                  border: '1px solid',
+                  borderColor: 'grays.600',
+                  borderRadius: 'medium',
+                  transition: 'all ease-in',
+                  transitionDuration: theme => theme.speeds[2],
+                  ':hover, :focus': {
+                    transform: 'scale(0.98)',
+                  },
+                })}
+              >
+                New Sandbox
+              </Button>
             </Column>
-          ))}
-        </Grid>
+            {startPageSandboxes.recent.map(sandbox => (
+              <Column key={sandbox.id}>
+                <SandboxCard sandbox={sandbox} />
+              </Column>
+            ))}
+          </Grid>
+        ) : (
+          <Loading />
+        )}
       </section>
     </>
   );