Prevent layout shift on hover in libs/board manager (#1568)

Author: francescospissu

arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx

@@ -14,37 +14,21 @@ export class ComponentListItem<
       )[0];
       this.state = {
         selectedVersion: version,
-        focus: false,
-        versionUpdate: false,
       };
     }
   }
 
-  override componentDidUpdate(
-    prevProps: ComponentListItem.Props<T>,
-    prevState: ComponentListItem.State
-  ): void {
-    if (this.state.focus !== prevState.focus) {
-      this.props.onFocusDidChange();
-    }
-  }
-
   override render(): React.ReactNode {
     const { item, itemRenderer } = this.props;
     return (
-      <div
-        onMouseEnter={() => this.setState({ focus: true })}
-        onMouseLeave={() => {
-          if (!this.state.versionUpdate) this.setState({ focus: false });
-        }}
-      >
+      <>
         {itemRenderer.renderItem(
           Object.assign(this.state, { item }),
           this.install.bind(this),
           this.uninstall.bind(this),
           this.onVersionChange.bind(this)
         )}
-      </div>
+      </>
     );
   }
 
@@ -55,7 +39,6 @@ export class ComponentListItem<
     )[0];
     this.setState({
       selectedVersion: version,
-      versionUpdate: false,
     });
     try {
       await this.props.install(item, toInstall);
@@ -71,7 +54,7 @@ export class ComponentListItem<
   }
 
   private onVersionChange(version: Installable.Version): void {
-    this.setState({ selectedVersion: version, versionUpdate: true });
+    this.setState({ selectedVersion: version });
   }
 }
 
@@ -81,12 +64,9 @@ export namespace ComponentListItem {
     readonly install: (item: T, version?: Installable.Version) => Promise<void>;
     readonly uninstall: (item: T) => Promise<void>;
     readonly itemRenderer: ListItemRenderer<T>;
-    readonly onFocusDidChange: () => void;
   }
 
   export interface State {
     selectedVersion?: Installable.Version;
-    focus: boolean;
-    versionUpdate: boolean;
   }
 }

arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx

@@ -125,7 +125,7 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
         rowIndex={index}
         parent={parent}
       >
-        {({ measure, registerChild }) => (
+        {({ registerChild }) => (
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           <div ref={registerChild} style={style}>
@@ -135,7 +135,6 @@ export class ComponentList<T extends ArduinoComponent> extends React.Component<
               itemRenderer={this.props.itemRenderer}
               install={this.props.install}
               uninstall={this.props.uninstall}
-              onFocusDidChange={() => measure()}
             />
           </div>
         )}

arduino-ide-extension/src/browser/widgets/component-list/list-item-renderer.tsx

@@ -28,7 +28,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
     uninstall: (item: T) => Promise<void>,
     onVersionChange: (version: Installable.Version) => void
   ): React.ReactNode {
-    const { item, focus } = input;
+    const { item } = input;
     let nameAndAuthor: JSX.Element;
     if (item.name && item.author) {
       const name = <span className="name">{item.name}</span>;
@@ -127,12 +127,10 @@ export class ListItemRenderer<T extends ArduinoComponent> {
           {description}
         </div>
         <div className="info">{moreInfo}</div>
-        {focus && (
-          <div className="footer">
-            {versions}
-            {installButton}
-          </div>
-        )}
+        <div className="footer">
+          {versions}
+          {installButton}
+        </div>
       </div>
     );
   }