skeleton for inputs

src/Components/MyFormInputs/index.js

@@ -1,4 +1,4 @@
-import { Form, Input, InputNumber } from "antd";
+import { Form, Input, InputNumber, Skeleton } from "antd";
 import { Constants, myFetch } from "../../utils";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -221,6 +221,7 @@ export function MyFormInput({
   inputPlaceholder,
   inputType,
   inputNotRequired,
+  showSkeleton,
 }) {
   const commonProps = {
     ...propsInput,
@@ -254,12 +255,18 @@ export function MyFormInput({
   }
 
   const inputComponents = {
-    textarea: (
+    textarea: showSkeleton ? (
+      <Skeleton.Input size="large" active block />
+    ) : (
       <Input.TextArea {...commonProps} autoSize={{ minRows: 2, maxRows: 6 }} />
     ),
     number: <InputNumber {...commonProps} />,
     password: <Input.Password {...commonProps} />,
-    default: <Input {...commonProps} />,
+    default: showSkeleton ? (
+      <Skeleton.Input active block />
+    ) : (
+      <Input {...commonProps} />
+    ),
   };
 
   return (

src/Pages/Store/Settings/index.js

@@ -19,7 +19,7 @@ export default function StoreSettings() {
 
   const [isRequesting, setIsRequesting] = useState(true);
   const [requestState, setRequestState] = useState(RequestState.INIT);
-  //const [storeData, setStoreData] = useState({});
+
   const delayTimeout = useRef();
 
   const companyName = Form.useWatch("companyName", form);
@@ -35,8 +35,6 @@ export default function StoreSettings() {
       t: t,
     })
       .then((data) => {
-        // setStoreData(data.store);
-
         form.setFieldsValue({
           companyName: data.store.name,
           phoneNumber: data.store.phone_number,
@@ -98,7 +96,6 @@ export default function StoreSettings() {
 
       <Card
         title={t("storeSettings.pageTitle")}
-        loading={isRequesting}
         extra={
           <RequestStateItem
             state={requestState}
@@ -111,18 +108,21 @@ export default function StoreSettings() {
             formItemName="companyName"
             label={t("common.companyName")}
             inputPlaceholder={t("common.companyNamePlaceholder")}
+            showSkeleton={isRequesting}
           />
 
           <MyFormInput
             formItemName="phoneNumber"
             label={t("common.companyPhoneNumber")}
             inputPlaceholder={t("common.companyPhoneNumberPlaceholder")}
+            showSkeleton={isRequesting}
           />
 
           <MyFormInput
             formItemName="email"
             label={t("common.companyEmail")}
             inputPlaceholder={t("common.companyEmailPlaceholder")}
+            showSkeleton={isRequesting}
           />
 
           <MyFormInput
@@ -130,6 +130,7 @@ export default function StoreSettings() {
             label={t("common.companyAddress")}
             inputType="textarea"
             inputPlaceholder={t("common.companyAddressPlaceholder")}
+            showSkeleton={isRequesting}
           />
         </Form>
       </Card>