Merge pull request #100 from NearSocial/loading-placeholder

Add `loading` prop to a Widget. It would display the passed value instead of the default loading spinner. It can be used to display a custom loading indicator or a placeholder. Example:
```jsx
<Widget
  loading={<div style={{width: "100%", height: "200px"}}>Loading...</div>}
  src="mob.near/widget/ProfilePage"
/>

CHANGELOG.md

@@ -30,6 +30,13 @@ const opGoerliProvider = new ethers.providers.JsonRpcProvider(
 console.log(opGoerliProvider);
 ```
 - BREAKING: Update `Ethers.send` to ignore cache and return a promise instead of the cached value.
+- Add `loading` prop to a Widget. It would display the passed value instead of the default loading spinner. It can be used to display a custom loading indicator or a placeholder. Example:
+```jsx
+<Widget
+  loading={<div style={{width: "100%", height: "200px"}}>Loading...</div>}
+  src="mob.near/widget/ProfilePage"
+/>
+```
 
 ## 2.2.4
 

src/lib/components/Widget.js

@@ -49,6 +49,7 @@ const computeSrcOrCode = (src, code, configs) => {
 
 export const Widget = React.forwardRef((props, forwardedRef) => {
   const {
+    loading,
     src: propsSrc,
     code: propsCode,
     depth,
@@ -71,7 +72,9 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
   const [srcOrCode, setSrcOrCode] = useState(null);
   const ethersProviderContext = useContext(EthersProviderContext);
 
-  const networkId = configs && configs.findLast(config => config && config.networkId)?.networkId;
+  const networkId =
+    configs &&
+    configs.findLast((config) => config && config.networkId)?.networkId;
   const cache = useCache(networkId);
   const near = useNear(networkId);
   const accountId = useAccountId(networkId);
@@ -285,6 +288,6 @@ export const Widget = React.forwardRef((props, forwardedRef) => {
       </>
     </ErrorBoundary>
   ) : (
-    Loading
+    loading ?? Loading
   );
-});
+});