fix: 💄 skeleton

pln-planning-tools · Feb 11, 2023 · a921e13 · a921e13
1 parent 4d234d2
commit a921e13
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 56 deletions.
diff --git a/components/roadmap-grid/RoadmapDetailedView.tsx b/components/roadmap-grid/RoadmapDetailedView.tsx
@@ -1,4 +1,4 @@
-import { Box, Spinner, Stack, Skeleton } from '@chakra-ui/react';
+import { Box, Spinner, Skeleton } from '@chakra-ui/react';
 import { useHookstate } from '@hookstate/core';
 import type { Dayjs } from 'dayjs';
 import _ from 'lodash';
@@ -139,19 +139,6 @@ export function RoadmapDetailed({
     return <Spinner />;
   }
 
-  // return early while loading.
-  if (globalLoadingState.get()) {
-    return (
-      <Stack pt={"20px"}>
-        <Skeleton height='60px' />
-        <Skeleton height='150px' />
-        <Skeleton height='150px' />
-        <Skeleton height='150px' />
-        <Skeleton height='150px' />
-      </Stack>
-    )
-  }
-
   /**
    * Current getTicks function returns 1 less than the number of ticks we want.
    */
@@ -164,24 +151,29 @@ export function RoadmapDetailed({
       {isDevMode && <NumSlider msg="how many grid columns" value={numGridCols} min={20} max={60} step={numHeaderTicks} setValue={setNumGridCols} />}
 
       <Box className={`${styles.timelineBox} ${viewMode == 'detail' ? styles.detailView : ''}`} >
-        <Grid ticksLength={numGridCols}>
-          {ticksHeader.map((tick, index) => (
-
-            <GridHeader key={index} tick={tick} index={index} numHeaderTicks={numHeaderTicks} numGridCols={numGridCols} />
-          ))}
-
-          <Headerline numGridCols={numGridCols} ticksRatio={3} />
-        </Grid>
-        <Grid ticksLength={numGridCols} scroll={true} renderTodayLine={showTodayMarker} >
-          {issuesGroupedState.map((group, index) => (
-            <ErrorBoundary key={`Fragment-${index}`} >
-              <GroupHeader group={group} key={`GroupHeader-${index}`} issueDataState={issueDataState} /><GroupWrapper key={`GroupWrapper-${index}`}>
-                {group.ornull != null && group.items.ornull != null &&
-                  _.sortBy(group.items.ornull, ['title']).map((item, index) => <GridRow key={index} milestone={item} index={index} timelineTicks={ticks} numGridCols={numGridCols} numHeaderItems={numHeaderTicks} issueDataState={issueDataState} />)}
-              </GroupWrapper>
-            </ErrorBoundary>
-          ))}
-        </Grid>
+        <Skeleton isLoaded={!globalLoadingState.get()} >
+          <Grid ticksLength={numGridCols}>
+
+            {ticksHeader.map((tick, index) => (
+
+              <GridHeader key={index} tick={tick} index={index} numHeaderTicks={numHeaderTicks} numGridCols={numGridCols} />
+            ))}
+
+            <Headerline numGridCols={numGridCols} ticksRatio={3} />
+          </Grid>
+        </Skeleton>
+        <Skeleton isLoaded={!globalLoadingState.get()} mt={8}>
+          <Grid ticksLength={numGridCols} scroll={true} renderTodayLine={showTodayMarker} >
+            {issuesGroupedState.map((group, index) => (
+              <ErrorBoundary key={`Fragment-${index}`} >
+                <GroupHeader group={group} key={`GroupHeader-${index}`} issueDataState={issueDataState} /><GroupWrapper key={`GroupWrapper-${index}`}>
+                  {group.ornull != null && group.items.ornull != null &&
+                    _.sortBy(group.items.ornull, ['title']).map((item, index) => <GridRow key={index} milestone={item} index={index} timelineTicks={ticks} numGridCols={numGridCols} numHeaderItems={numHeaderTicks} issueDataState={issueDataState} />)}
+                </GroupWrapper>
+              </ErrorBoundary>
+            ))}
+          </Grid>
+        </Skeleton>
       </Box>
     </>
   );

diff --git a/components/roadmap-grid/RoadmapTabbedView.tsx b/components/roadmap-grid/RoadmapTabbedView.tsx
@@ -66,17 +66,15 @@ export function RoadmapTabbedView({
     }
 
     return (
-      <Skeleton isLoaded={!globalLoadingState.get()}>
-        <Tab
-          className={styles.gridViewTab}
-          key={index}
-        >
-          <Center>
-            <TabIcon />
-            <Link href={'#' + tabViewMap[title]} className={styles.noDecoration}>{title}</Link>
-          </Center>
-        </Tab>
-      </Skeleton>
+      <Tab
+        className={styles.gridViewTab}
+        key={index}
+      >
+        <Center>
+          <TabIcon />
+          <Link href={'#' + tabViewMap[title]} className={styles.noDecoration}>{title}</Link>
+        </Center>
+      </Tab>
     )
   };
 

diff --git a/components/roadmap-grid/today-marker-toggle.tsx b/components/roadmap-grid/today-marker-toggle.tsx
@@ -1,27 +1,22 @@
-import { Button, Skeleton, Text } from '@chakra-ui/react';
+import { Button, Text } from '@chakra-ui/react';
 import React from 'react';
 import SvgEyeClosedIcon from '../icons/svgr/SvgEyeClosedIcon';
 import SvgEyeOpenIcon from '../icons/svgr/SvgEyeOpenIcon';
 
 import { setShowTodayMarker, useShowTodayMarker } from '../../hooks/useShowTodayMarker';
 
-
-import { useGlobalLoadingState } from '../../hooks/useGlobalLoadingState';
 import styles from './today-marker.module.css';
 
 export function TodayMarkerToggle() {
   const showTodayMarker = useShowTodayMarker();
-  const globalLoadingState = useGlobalLoadingState();
 
   return (
-    <Skeleton isLoaded={!globalLoadingState.get()}>
-      <Button
-        className={showTodayMarker ? styles.todayMarkerToggle : styles.todayMarkerToggleDisabled}
-        onClick={() => setShowTodayMarker(!showTodayMarker)}
-      >
-        { showTodayMarker ? <SvgEyeOpenIcon /> : <SvgEyeClosedIcon /> }
-      <Text fontSize={"16px"} pl={'4px'} fontWeight={500}>Today</Text>
-      </Button>
-    </Skeleton>
+    <Button
+      className={showTodayMarker ? styles.todayMarkerToggle : styles.todayMarkerToggleDisabled}
+      onClick={() => setShowTodayMarker(!showTodayMarker)}
+    >
+      { showTodayMarker ? <SvgEyeOpenIcon /> : <SvgEyeClosedIcon /> }
+    <Text fontSize={"16px"} pl={'4px'} fontWeight={500}>Today</Text>
+    </Button>
   );
 }