feat: add IELoading component

Animated GIF component showing the classic Internet Explorer HTTP
loading animation extracted from the original IE source. The GIF
asset is shipped in dist/images/IELoading.gif and the component
accepts a src prop for the consumer to provide the path.

Adapted from upstream PR react95-io#388 (credit @Puzovoz and @Montty666).

Author: limehawk

dist/IELoading/IELoading.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CommonStyledProps } from '../types';
+type IELoadingProps = {
+    src?: string;
+    width?: number;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'width'> & CommonStyledProps;
+declare const IELoading: React.ForwardRefExoticComponent<{
+    src?: string | undefined;
+    width?: number | undefined;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "width"> & CommonStyledProps & React.RefAttributes<HTMLImageElement>>;
+export { IELoading, IELoadingProps };
+//# sourceMappingURL=IELoading.d.ts.map

dist/IELoading/IELoading.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledImg = styled__default["default"].img`
+  width: ${({ $width }) => $width}px;
+  height: auto;
+`;
+const IELoading = React.forwardRef(({ width = 250, ...otherProps }, ref) => {
+  return React__default["default"].createElement(StyledImg, { ref, alt: "Loading", "$width": width, ...otherProps });
+});
+IELoading.displayName = "IELoading";
+
+exports.IELoading = IELoading;

dist/IELoading/IELoading.mjs

@@ -0,0 +1,13 @@
+import React__default, { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const StyledImg = styled.img`
+  width: ${({ $width }) => $width}px;
+  height: auto;
+`;
+const IELoading = forwardRef(({ width = 250, ...otherProps }, ref) => {
+  return React__default.createElement(StyledImg, { ref, alt: "Loading", "$width": width, ...otherProps });
+});
+IELoading.displayName = "IELoading";
+
+export { IELoading };

dist/images/IELoading.gif

@@ -12,6 +12,7 @@ export * from './Frame/Frame';
 export * from './GroupBox/GroupBox';
 export * from './Handle/Handle';
 export * from './Hourglass/Hourglass';
+export * from './IELoading/IELoading';
 export * from './MenuList/MenuList';
 export * from './Monitor/Monitor';
 export * from './NumberInput/NumberInput';

dist/index.d.ts

@@ -16,6 +16,7 @@ var Frame = require('./Frame/Frame.js');
 var GroupBox = require('./GroupBox/GroupBox.js');
 var Handle = require('./Handle/Handle.js');
 var Hourglass = require('./Hourglass/Hourglass.js');
+var IELoading = require('./IELoading/IELoading.js');
 var MenuList = require('./MenuList/MenuList.js');
 var Monitor = require('./Monitor/Monitor.js');
 var NumberInput = require('./NumberInput/NumberInput.js');
@@ -74,6 +75,7 @@ exports.Frame = Frame.Frame;
 exports.GroupBox = GroupBox.GroupBox;
 exports.Handle = Handle.Handle;
 exports.Hourglass = Hourglass.Hourglass;
+exports.IELoading = IELoading.IELoading;
 exports.MenuList = MenuList.MenuList;
 exports.Monitor = Monitor.Monitor;
 exports.NumberInput = NumberInput.NumberInput;

dist/index.js

@@ -12,6 +12,7 @@ export { Frame } from './Frame/Frame.mjs';
 export { GroupBox } from './GroupBox/GroupBox.mjs';
 export { Handle } from './Handle/Handle.mjs';
 export { Hourglass } from './Hourglass/Hourglass.mjs';
+export { IELoading } from './IELoading/IELoading.mjs';
 export { MenuList } from './MenuList/MenuList.mjs';
 export { Monitor } from './Monitor/Monitor.mjs';
 export { NumberInput } from './NumberInput/NumberInput.mjs';

dist/index.mjs

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CommonStyledProps } from '../types';
+
+type IELoadingProps = {
+  src?: string;
+  width?: number;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'width'> &
+  CommonStyledProps;
+
+const StyledImg = styled.img<{ $width: number }>`
+  width: ${({ $width }) => $width}px;
+  height: auto;
+`;
+
+const IELoading = forwardRef<HTMLImageElement, IELoadingProps>(
+  ({ width = 250, ...otherProps }, ref) => {
+    return (
+      <StyledImg
+        ref={ref}
+        alt='Loading'
+        $width={width}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+IELoading.displayName = 'IELoading';
+
+export { IELoading, IELoadingProps };

src/IELoading/IELoading.tsx

@@ -15,6 +15,7 @@ export * from './Frame/Frame';
 export * from './GroupBox/GroupBox';
 export * from './Handle/Handle';
 export * from './Hourglass/Hourglass';
+export * from './IELoading/IELoading';
 export * from './MenuList/MenuList';
 export * from './Monitor/Monitor';
 export * from './NumberInput/NumberInput';