cables now start at the top of the sidewall and dont go into the roof, added skeletons to the bin page for when it is loading, also fixed an issue with the camera being very zoomed in sometimes when the page loads

src/3dModels/CameraControls/OrbitCameraControls.tsx

@@ -82,6 +82,9 @@ export default function OrbitCameraControls(props: Props) {
     });
 
     useEffect(() => {
+        // Sync radius whenever initialRadius prop changes (e.g. after bin data loads)
+        spherical.current.radius = initialRadius ?? 10;
+
         const canvas = gl.domElement;
         canvas.addEventListener("contextmenu", e => e.preventDefault());
 

src/bin/3dView/Data/BuildCableData.ts

@@ -172,7 +172,8 @@ export function BuildCableData(bin: Bin, dims: BinDims): CableData[] {
     distributed.forEach(orbit => {
         const count = orbit.assignedCount ?? 0;
 
-        const topY    = getTopY(orbit.radius, dims);
+        // const topY    = getTopY(orbit.radius, dims); //this is if we want the cables to start at the roof
+        const topY = dims.sidewallHeight/2 //this will start the cables at the top of the sidewall
         const bottomY = getBottomY(orbit.radius, dims);
     
         if (orbit.orbit === 0 && count > 0) {

src/bin/3dView/Scene/Bin3dView.tsx

@@ -70,7 +70,8 @@ export default function Bin3dView(props: Props) {
         const diameter    = dims.diameter / scale;
         const largestDim  = Math.max(totalHeight, diameter);
         const fovRad      = (75 * Math.PI) / 180;
-        const padding     = 1.3; // 30% breathing room
+        // const padding     = 1.3; // 30% breathing room
+        const padding = 1.3 + (largestDim / 100) * 2; //more dynamic breathing room based on the bin size
         return (largestDim / (2 * Math.tan(fovRad / 2))) * padding;
     }, [dims, scale]);
 

src/bin/binSummary/BinSummary.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, DialogContent, DialogTitle, Grid2, IconButton, LinearProgress, Slider, Switch, Tooltip, Typography } from "@mui/material";
+import { Box, Card, DialogContent, DialogTitle, Grid2, IconButton, LinearProgress, Skeleton, Slider, Switch, Tooltip, Typography } from "@mui/material";
 import { useMobile } from "hooks";
 import { Bin, Component, Device } from "models";
 import Bin3dVisualizer from "../bin3dVisualizer";
@@ -23,6 +23,7 @@ import BinPlayer from "bin/BinPlayer";
 
 interface Props {
     bin: Bin
+    loading?: boolean,
     devices: Device[]
     cables?: GrainCable[]
     plenums?: Plenum[]
@@ -40,7 +41,7 @@ interface Props {
     
 }
 export default function BinSummary(props: Props){
-    const {bin, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback, cables = [], plenums = [], setPreferences, setBin} = props
+    const {bin, loading, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback, cables = [], plenums = [], setPreferences, setBin} = props
     //const [currentDevice, setCurrentDevice] = useState<Device | undefined>(undefined)
     const isMobile = useMobile()
     const [openGrainDialog, setOpenGrainDialog] = useState(false)
@@ -387,9 +388,12 @@ export default function BinSummary(props: Props){
               }}
             />
             <ChangeGrainDialog bin={bin} open={openGrainDialog} closeDialog={()=>setOpenGrainDialog(false)} permissions={permissions} updateBin={updateBinCallback}/>
-            {isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()}
+            {loading ? <Skeleton variant="rectangular" height={100} sx={{marginBottom: 2}} /> : isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()}
             <Grid2 container spacing={2}>
                 <Grid2 size={isMobile ? 12 : 7}>
+                  {loading ?
+                    <Skeleton variant="rectangular" height={600}/>
+                  :
                     <Card raised sx={{height: 600, position: "relative"}}>
                       <Bin3dVisualizer 
                         bin={bin} 
@@ -409,8 +413,12 @@ export default function BinSummary(props: Props){
                       </Box>
                     }
                     </Card>
+                  }
                 </Grid2>
                 <Grid2 size={isMobile ? 12 : 5}>
+                    {loading ? 
+                      <Skeleton variant="rectangular" height={600}/>
+                    :
                     <Card raised sx={{ height: 600, display: "flex", flexDirection: "column", overflow: "hidden" }}>
                       <BinDetails 
                         bin={bin} 
@@ -422,11 +430,17 @@ export default function BinSummary(props: Props){
                         cables={cables}
                         plenums={plenums}/>
                     </Card>
+                    }
                 </Grid2>
                 <Grid2 size={12}>
+                  {loading ? 
+                    <Skeleton variant="rectangular" height={250}/>
+                  :
                     <Card>
                       <BinSensorsDisplay components={componentMap} bin={bin} preferences={binPrefs} setPreferences={setPreferences} componentDevices={componentDevices}/>
                     </Card>
+                  }
+
                 </Grid2>
             </Grid2>
         </Box>

src/pages/Bin.tsx

@@ -69,7 +69,6 @@ import ButtonGroup from "common/ButtonGroup";
 import BinTransactions from "bin/BinTransactions";
 import { CO2 } from "models/CO2";
 import ObjectInteractions from "objects/objectInteractions/ObjectInteractions";
-import Bin3dView from "bin/3dView/Scene/Bin3dView";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -780,8 +779,6 @@ export default function Bin(props: Props) {
     );
   };
 
-  const [fillPercent, setFillPercent] = useState(0)
-
   const desktopView = () => {
     return (
       <Card sx={{ padding: 1 }}>

src/pages/BinV2.tsx

@@ -14,7 +14,7 @@ import { Pressure } from "models/Pressure";
 import { CO2 } from "models/CO2";
 import moment from "moment";
 import { quack } from "protobuf-ts/quack";
-import { Box, Drawer, Grid2 as Grid, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tab, Tabs, Theme, Tooltip } from "@mui/material";
+import { Box, CircularProgress, Drawer, Grid2 as Grid, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tab, Tabs, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import NotesIcon from "@mui/icons-material/Notes";
 import TasksIcon from "products/Construction/TasksIcon";
@@ -83,7 +83,6 @@ const useStyles = makeStyles((theme: Theme) => {
 
 
 export default function BinV2(){
-    const warningThreshold = 6;
     const isMobile = useMobile();
     const binID = useParams<{ binID: string }>()?.binID ?? "";
     const binAPI = useBinAPI();
@@ -537,6 +536,7 @@ export default function BinV2(){
             {pageHeader()}
             <BinSummary 
               bin={bin} 
+              loading={binLoading}
               devices={devices} 
               fans={fans} 
               heaters={heaters}