fix: slots list when no you slots

Author: amliu-jumptrading

src/features/Navigation/SlotsList.tsx

@@ -8,7 +8,7 @@ import {
   slotNavFilterAtom,
   slotOverrideAtom,
 } from "../../atoms";
-import { Box } from "@radix-ui/themes";
+import { Box, Flex, Text } from "@radix-ui/themes";
 import type { RefObject } from "react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./slotsList.module.css";
@@ -72,6 +72,7 @@ function InnerSlotsList({
   const visibleStartIndexRef = useRef<number | null>(null);
 
   const [hideList, setHideList] = useState(true);
+  const [totalListHeight, setTotalListHeight] = useState(0);
 
   useEffect(() => {
     // initially hide list to
@@ -156,7 +157,11 @@ function InnerSlotsList({
         getIndexForSlot={getIndexForSlot}
         debouncedScroll={debouncedScroll}
       />
-      <SlotsPlaceholder width={width} height={height} />
+      <SlotsPlaceholder
+        width={width}
+        height={height}
+        totalListHeight={totalListHeight}
+      />
       <ResetLive />
       <Virtuoso
         ref={listRef}
@@ -174,6 +179,7 @@ function InnerSlotsList({
         rangeChanged={rangeChanged}
         components={{ ScrollSeekPlaceholder: MScrollSeekPlaceHolder }}
         scrollSeekConfiguration={scrollSeekConfiguration}
+        totalListHeightChanged={(height) => setTotalListHeight(height)}
       />
     </Box>
   );
@@ -336,6 +342,23 @@ function MySlotsList({ width, height }: SlotsListProps) {
 
   if (!mySlots) return null;
 
+  if (mySlots.length === 0) {
+    return (
+      <Flex
+        width={`${width}px`}
+        height={`${height}px`}
+        justify="center"
+        align="center"
+      >
+        <Text className={styles.noSlotsText}>
+          No Slots
+          <br />
+          Available
+        </Text>
+      </Flex>
+    );
+  }
+
   return (
     <InnerSlotsList
       width={width}

src/features/Navigation/SlotsRenderer.tsx

@@ -2,7 +2,8 @@ import { atom, useAtomValue } from "jotai";
 import {
   currentLeaderSlotAtom,
   currentSlotAtom,
-  earliestProcessedSlotLeaderAtom,
+  firstProcessedSlotAtom,
+  leaderSlotsAtom,
   nextLeaderSlotAtom,
   slotDurationAtom,
 } from "../../atoms";
@@ -40,10 +41,13 @@ export default function SlotsRenderer(props: { leaderSlotForGroup: number }) {
 
 const getStatusAtom = atom((get) => {
   const currentLeaderSlot = get(currentLeaderSlotAtom);
-  const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+  const firstProcessedSlot = get(firstProcessedSlotAtom);
+  const leaderSlots = get(leaderSlotsAtom);
+
   if (
+    !leaderSlots ||
     currentLeaderSlot === undefined ||
-    earliestProcessedSlotLeader === undefined
+    firstProcessedSlot === undefined
   )
     return;
 
@@ -55,7 +59,7 @@ const getStatusAtom = atom((get) => {
         currentLeaderSlot <= slot && slot < currentLeaderSlot + slotsPerLeader,
       isFutureSlotGroup: currentLeaderSlot + slotsPerLeader <= slot,
       isProcessedSlotGroup:
-        earliestProcessedSlotLeader <= slot && slot <= currentLeaderSlot,
+        firstProcessedSlot <= slot && slot <= currentLeaderSlot,
       isYourNextLeaderGroup:
         nextLeaderSlot &&
         nextLeaderSlot <= slot &&
@@ -233,11 +237,14 @@ function SlotContent({ firstSlot }: SlotGroupProps) {
 export function SlotsPlaceholder({
   width,
   height,
+  totalListHeight,
 }: {
   width: number;
   height: number;
+  totalListHeight: number;
 }) {
   const items = useMemo(() => Math.ceil(height / 46), [height]);
+  if (totalListHeight < height) return;
 
   return (
     <Box

src/features/Navigation/slotsList.module.css

@@ -4,3 +4,9 @@
     visibility: hidden;
   }
 }
+
+.no-slots-text {
+  font-size: 12px;
+  color: var(--regular-text-color);
+  text-align: center;
+}

src/features/Overview/SlotPerformance/atoms.ts

@@ -10,8 +10,8 @@ import { produce } from "immer";
 import { countBy } from "lodash";
 import {
   currentSlotAtom,
-  earliestProcessedSlotLeaderAtom,
   epochAtom,
+  firstProcessedSlotAtom,
   leaderSlotsAtom,
   slotOverrideAtom,
 } from "../../../atoms";
@@ -30,22 +30,22 @@ function getSlotState(
   slot?: number,
   epoch?: Epoch,
   leaderSlots?: number[],
-  earliestProcessedSlotLeader?: number,
+  firstProcessedSlot?: number,
   currentSlot?: number,
 ) {
   if (slot === undefined) return SelectedSlotValidityState.Valid;
   if (
     !epoch ||
     !leaderSlots ||
-    earliestProcessedSlotLeader === undefined ||
+    firstProcessedSlot === undefined ||
     currentSlot === undefined
   )
     return SelectedSlotValidityState.NotReady;
   if (slot < epoch.start_slot || epoch.end_slot < slot)
     return SelectedSlotValidityState.OutsideEpoch;
   if (!leaderSlots.includes(getSlotGroupLeader(slot)))
     return SelectedSlotValidityState.NotYou;
-  if (slot < earliestProcessedSlotLeader)
+  if (slot < firstProcessedSlot)
     return SelectedSlotValidityState.BeforeFirstProcessed;
   if (slot >= currentSlot) return SelectedSlotValidityState.Future;
   return SelectedSlotValidityState.Valid;
@@ -60,13 +60,13 @@ export const baseSelectedSlotAtom = (function () {
       const epoch = get(epochAtom);
       const slot = get(_baseSelectedSlotAtom);
       const leaderSlots = get(leaderSlotsAtom);
-      const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+      const firstProcessedSlot = get(firstProcessedSlotAtom);
       const currentSlot = get(currentSlotAtom);
       const state = getSlotState(
         slot,
         epoch,
         leaderSlots,
-        earliestProcessedSlotLeader,
+        firstProcessedSlot,
         currentSlot,
       );
       return {
@@ -78,12 +78,12 @@ export const baseSelectedSlotAtom = (function () {
     },
     (get, set, slot?: number, epoch?: Epoch) => {
       const leaderSlots = get(leaderSlotsAtom);
-      const earliestProcessedSlotLeader = get(earliestProcessedSlotLeaderAtom);
+      const firstProcessedSlot = get(firstProcessedSlotAtom);
       const currentSlot = get(currentSlotAtom);
       if (
         !epoch ||
         !leaderSlots ||
-        earliestProcessedSlotLeader === undefined ||
+        firstProcessedSlot === undefined ||
         currentSlot === undefined
       ) {
         set(_baseSelectedSlotAtom, undefined);
@@ -97,7 +97,7 @@ export const baseSelectedSlotAtom = (function () {
           slot,
           epoch,
           leaderSlots,
-          earliestProcessedSlotLeader,
+          firstProcessedSlot,
           currentSlot,
         ) === SelectedSlotValidityState.Valid;