Commit 458c28a0 authored by Ondřej Bleha's avatar Ondřej Bleha
Browse files

feat: adding temporary loading skeletons

parent 98fc4d0f

app/src/App.tsx

+18 −1
Original line number Diff line number Diff line
@@ -12,6 +12,7 @@ import { 
import { Room } from "./components/Room/Room";

import { Landing } from "./components/Landing/Landing";

import { v4 as uuidv4 } from "uuid";

import { CircularProgress, LinearProgress } from "@mui/material";



function App() {

  const { data: dataRooms, error: errorRooms } = useSWR(
@@ -20,7 +21,23 @@ function App() { 
  );



  if (errorRooms) return <div>failed to load room information</div>;

  if (!dataRooms) return <div>loading room information...</div>;

  if (!dataRooms) return (

    <>

      <LinearProgress />

      <div className="App">

        <nav className="menu">

          <div className="menu-item">

            <CircularProgress size={80} />

          </div>

        </nav>

        <div className="content">

          <div className="modules">

            <div className="module"></div>

          </div>

        </div>

      </div>

    </>

  );



  const roomMenuItems = dataRooms.map((room) => {

    const nn = "room/" + room.name;

app/src/components/Blinds/Blinds.tsx

+5 −1
Original line number Diff line number Diff line
@@ -11,6 +11,8 @@ import fetcher from "../../models/fetcher"; 
import { IBlinds } from "../../models/types";

import { v4 as uuidv4 } from "uuid";

import { updateBlinds } from "../../models/databaseRequests";

import Skeleton from "@mui/material/Skeleton";

import { FakeComponent } from "../Utils/FakeComponent";



const Step = 1;

const MinRoll = 0;
@@ -28,7 +30,9 @@ export const Blinds = ({ roomName }: IBlindsProps) => { 
  );



  if (errorBlinds) return <div>failed to load blinds</div>;

  if (!dataBlinds) return <div>loading blinds...</div>;

  if (!dataBlinds) return (

    <FakeComponent />

  );



  const { state }: IBlinds = dataBlinds;

app/src/components/Heating/Heating.tsx

+5 −1
Original line number Diff line number Diff line
@@ -10,6 +10,8 @@ import useSWR, { useSWRConfig } from "swr"; 
import fetcher from "../../models/fetcher";

import { v4 as uuidv4 } from "uuid";

import { updateHeating } from "../../models/databaseRequests";

import Skeleton from "@mui/material/Skeleton";

import { FakeComponent } from "../Utils/FakeComponent";



const MaxHeat = 30;

const MinHeat = 10;
@@ -27,7 +29,9 @@ export const Heating = ({ roomName }: IHeatingProps) => { 
  );



  if (errorHeating) return <div>failed to load thermostat</div>;

  if (!dataHeating) return <div>loading thermostat...</div>;

  if (!dataHeating) return (

    <FakeComponent />

  );



  const ws = new WebSocket(`${import.meta.env.VITE_WEBSOCKET}`);

app/src/components/Landing/LandingControls.tsx

+5 −0
Original line number Diff line number Diff line
@@ -2,12 +2,17 @@ import Box from "@mui/material/Box"; 
import Stack from "@mui/material/Stack";

import { ApiDeviceName } from "../../models/types";

import { LandingControl } from "./LandingControl";

import Skeleton from "@mui/material/Skeleton";

import { FakeComponent } from "../Utils/FakeComponent";



interface ILandingControls {

  roomsList: { name: string }[];

}



export const LandingControls = ({ roomsList }: ILandingControls) => {

  if (!roomsList) return (

    <FakeComponent />

  );

  return (

    <Box className="module" sx={{ padding: 1 }}>

      <Stack

app/src/components/Landing/LandingLights.tsx

+12 −2
Original line number Diff line number Diff line
@@ -3,6 +3,8 @@ import { capitalizeFirstLetter } from "../../models/capitalizeFirstLetter"; 
import fetcher from "../../models/fetcher";

import LightList from "../LightsList/LightsList";

import { v4 as uuidv4 } from "uuid";

import Skeleton from "@mui/material/Skeleton";

import Typography from "@mui/material/Typography";



interface ILandingLightsProps {

  roomsList: { name: string }[];
@@ -23,8 +25,16 @@ export const LandingLights = ({ roomsList }: ILandingLightsProps) => { 
      );

    if (!dataLights)

      return (

        <div key={uuidv4()}>

          loading information about {room.name} lights...

        <div className="module">

          <Typography gutterBottom variant="body2">

            <Skeleton animation="wave" variant="rectangular" width={300} height={30} />

          </Typography>

          <Typography gutterBottom variant="body2">

            <Skeleton animation="wave" variant="rectangular" width={300} height={30} />

          </Typography>

          <Typography gutterBottom variant="body2">

            <Skeleton animation="wave" variant="rectangular" width={300} height={30} />

          </Typography>

        </div>

      );

    const header = capitalizeFirstLetter(room.name) + " lights";