fix vertical centering orderbook

components/trade/Orderbook.tsx

@@ -358,11 +358,9 @@ const Orderbook = () => {
   }, [serum3MarketExternal])
 
   useEffect(() => {
-    function handleResize() {
-      verticallyCenterOrderbook()
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
+    window.addEventListener('resize', verticallyCenterOrderbook)
+    // const id = setTimeout(verticallyCenterOrderbook, 400)
+    // return () => clearTimeout(id)
   }, [verticallyCenterOrderbook])
 
   const onGroupSizeChange = useCallback((groupSize: number) => {
@@ -373,8 +371,6 @@ const Orderbook = () => {
     setIsScrolled(true)
   }, [])
 
-  if (!serum3MarketExternal) return null
-
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b border-th-bkg-3 px-4 py-2">
@@ -408,6 +404,7 @@ const Orderbook = () => {
             </button>
           </Tooltip>
         </div>
+        {serum3MarketExternal ? (
           <Tooltip content="Grouping" placement="top">
             <GroupSize
               tickSize={serum3MarketExternal.tickSize}
@@ -415,22 +412,22 @@ const Orderbook = () => {
               value={grouping}
             />
           </Tooltip>
+        ) : null}
       </div>
       <div className="grid grid-cols-2 px-4 pt-2 pb-1 text-xxs text-th-fgd-4">
         <div className="col-span-1 text-right">{t('size')}</div>
         <div className="col-span-1 text-right">{t('price')}</div>
       </div>
-      {orderbookData ? (
       <div
         className="hide-scroll relative h-full overflow-y-scroll"
         ref={orderbookElRef}
         onScroll={handleScroll}
       >
-          {showSells && orderbookData?.asks?.length
+        {showSells
           ? depthArray.map((_x, index) => {
               return (
-                  <div key={index}>
-                    {orderbookData?.asks[index] ? (
+                <div className="h-[24px]" key={index}>
+                  {!!orderbookData?.asks[index] && serum3MarketExternal ? (
                     <MemoizedOrderbookRow
                       minOrderSize={serum3MarketExternal.minOrderSize}
                       tickSize={serum3MarketExternal.tickSize}
@@ -472,10 +469,10 @@ const Orderbook = () => {
             </div>
           </div>
         ) : null}
-          {showBuys && orderbookData?.bids?.length
+        {showBuys
           ? depthArray.map((_x, index) => (
-                <div key={index}>
-                  {orderbookData?.bids[index] ? (
+              <div className="h-[24px]" key={index}>
+                {!!orderbookData?.bids[index] && serum3MarketExternal ? (
                   <MemoizedOrderbookRow
                     minOrderSize={serum3MarketExternal.minOrderSize}
                     tickSize={serum3MarketExternal.tickSize}
@@ -503,15 +500,6 @@ const Orderbook = () => {
             ))
           : null}
       </div>
-      ) : (
-        <div className="space-y-[1px] px-4">
-          {depthArray.map((_x, index) => (
-            <SheenLoader className="flex flex-1" key={index}>
-              <div className="h-5 w-full rounded bg-th-bkg-2" />
-            </SheenLoader>
-          ))}
-        </div>
-      )}
     </div>
   )
 }