Try InputLoader

examples/getstarted/src/api/kitchensink/content-types/kitchensink/schema.json

@@ -133,7 +133,10 @@
     },
     "custom_field": {
       "type": "customField",
-      "customField": "plugin::mycustomfields.color"
+      "customField": "plugin::mycustomfields.color",
+      "options": {
+        "format": "hex"
+      }
     }
   }
 }

examples/getstarted/src/plugins/mycustomfields/admin/src/components/ColorPicker/ColorPickerInput/index.js

@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Stack } from '@strapi/design-system/Stack';
 import { FieldHint, FieldError, FieldLabel } from '@strapi/design-system/Field';
 import { useIntl } from 'react-intl';
 
-const ColorPickerInput = ({ intlLabel, id, name, required, labelAction, onChange, value }) => {
+const ColorPickerInput = ({
+  intlLabel,
+  id,
+  name,
+  required,
+  labelAction,
+  onChange,
+  value,
+  attribute,
+}) => {
   const { formatMessage } = useIntl();
 
+  const renderCount = useRef(0);
+  renderCount.current += 1;
+  console.log('renderCount', renderCount.current);
+
   return (
     <div>
       <Stack spacing={1}>
-        <FieldLabel action={labelAction} name={name} required={required}>
+        <FieldLabel action={labelAction} name={name} required={required} htmlFor={id || name}>
           {formatMessage(intlLabel)}
         </FieldLabel>
-        <input type="color" id={id || name} value={value} onChange={onChange} />
+        <input type="text" id={id || name} name={name} value={value} onChange={onChange} />
         <FieldHint />
         <FieldError />
       </Stack>

packages/core/admin/admin/src/content-manager/components/Inputs/InputLoader.js

@@ -0,0 +1,14 @@
+import React, { useMemo, memo } from 'react';
+import PropTypes from 'prop-types';
+
+const InputLoader = ({ component, ...props }) => {
+  const LazyComponent = useMemo(() => React.lazy(component), [component]);
+
+  return <LazyComponent {...props} />;
+};
+
+InputLoader.propTypes = {
+  component: PropTypes.func.isRequired,
+};
+
+export default memo(InputLoader);

packages/core/admin/admin/src/content-manager/components/Inputs/index.js

@@ -5,7 +5,13 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
+import {
+  GenericInput,
+  NotAllowedInput,
+  LoadingIndicatorPage,
+  useLibrary,
+  useCustomFields,
+} from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -21,6 +27,7 @@ import {
   select,
   VALIDATIONS_TO_OMIT,
 } from './utils';
+import InputLoader from './InputLoader';
 
 function Inputs({
   allowedFields,
@@ -228,12 +235,15 @@ function Inputs({
 
   if (customFieldUid) {
     const customField = customFieldsRegistry.get(customFieldUid);
-    const CustomFieldInput = React.lazy(customField.components.Input);
+    // const CustomFieldInput = TestColorPicker;
+    const CustomFieldInput = (props) => (
+      <InputLoader component={customField.components.Input} {...props} />
+    );
     customInputs[customFieldUid] = CustomFieldInput;
   }
 
   return (
-    <Suspense fallback="loading...">
+    <Suspense fallback={<LoadingIndicatorPage />}>
       <GenericInput
         attribute={fieldSchema}
         autoComplete="new-password"