feat(electron): electron shell skeleton (#8127)

fix AF-1331
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/e09203aa-f143-42f8-bd39-e5078d07ada2.mp4">1.mp4</video>

missing
- per split view skeleton
- per route skeleton

packages/frontend/component/src/ui/skeleton/index.css.ts

@@ -29,6 +29,7 @@ const waveKeyframes = keyframes({
 export const root = style({
   display: 'block',
   width: '100%',
+  maxWidth: '100%',
   height: defaultHeight,
   flexShrink: 0,
   /**
@@ -51,7 +52,7 @@ export const variant = {
     borderRadius: '50%',
   }),
   rectangular: style({
-    borderRadius: '0px',
+    borderRadius: '4px',
   }),
   rounded: style({
     borderRadius: '8px',

packages/frontend/component/src/ui/skeleton/skeleton.tsx

@@ -16,6 +16,7 @@ export const Skeleton = ({
   variant = 'text',
   children,
 
+  flex,
   width: _width,
   height: _height,
   style: _style,
@@ -29,6 +30,7 @@ export const Skeleton = ({
   const style = {
     width,
     height,
+    flex,
     ..._style,
   };
 

packages/frontend/component/src/ui/skeleton/types.ts

@@ -28,6 +28,11 @@ export interface SkeletonProps
    * Number values are treated as pixels.
    */
   height?: number | string;
+
+  /**
+   * Flex of the skeleton.
+   */
+  flex?: number | string;
 }
 
 export type PickStringFromUnion<T> = T extends string ? T : never;