fix spinner

store/reducers/nodesInputReducer.ts

@@ -29,14 +29,16 @@ interface INodesInput {
         value: INode
     }[],
     current_word: string,
-    products: IProduct[]
+    products: IProduct[],
+    loading: boolean
 }
 
 const initialState: INodesInput = {
     nodes: [],
     hints: [],
     current_word: "",
-    products: []
+    products: [],
+    loading:false
 }
 
 const nodesInputSlice = createSlice({
@@ -52,11 +54,15 @@ const nodesInputSlice = createSlice({
         deleteNode(state, action: PayloadAction<string>) {
             state.nodes = state.nodes.filter((e) => e.value != action.payload)
         },
+        setLoading(state, action: PayloadAction<boolean>){
+            state.loading = action.payload
+        }
         
     },
     extraReducers: (builder) => {
         builder.addCase(search.fulfilled, (state, action) => {
             state.products = action.payload;
+            state.loading = false
         })
         builder.addCase(createHints.fulfilled, (state, action) => {
             state.hints = action.payload;
@@ -64,13 +70,15 @@ const nodesInputSlice = createSlice({
     }
 })
 
-export const {setCurrentWord, createNode, deleteNode} = nodesInputSlice.actions;
+export const {setCurrentWord, createNode, deleteNode, setLoading} = nodesInputSlice.actions;
 
 
 export const hints = createSelector((state: INodesInput) => state.hints, hints => hints)
 export const currentWord = createSelector((state: INodesInput) => state.current_word, word => word)
 export const products = createSelector((state: INodesInput) => state.products, products => products)
 export const nodes = createSelector((state: INodesInput) => state.nodes, nodes => nodes)
+export const loading = createSelector((state: INodesInput) => state.loading, loading => loading)
+
 
 
 export default nodesInputSlice.reducer;

сomponents/card/index.tsx

@@ -14,7 +14,7 @@ export const ProductCard: React.FC<IProduct> = (props) =>{
     return(
         props.characteristic == undefined? null:
         <div  className={styles.card}>
-            <div className={styles.name}>{props.name}</div>
+            <div className={styles.name}>{props.name.length > 100? props.name.slice(0,100) + "...":props.name}</div>
             <div className={styles.prWrap}>
                 <div className={styles.score}> <span className={styles.red}>{props.score}</span> прсмотров</div>
                 <div className={styles.characteristic}> <span className={styles.blue}>{props.characteristic.length}</span> характеристик</div>

сomponents/search/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AutoComplete, Input, Tag } from 'antd';
 import { useAppDispatch, useAppSelector } from "../../hooks";
-import { createNode, deleteNode, hints, INode, nodes, products } from "../../store/reducers/nodesInputReducer";
+import { createNode, deleteNode, hints, INode, loading, nodes, products, setLoading } from "../../store/reducers/nodesInputReducer";
 import { createHints, search } from "../../store/reducers/asyncActions";
 import styles from "./search.module.css"
 
@@ -10,14 +10,14 @@ import styles from "./search.module.css"
 export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     const [data, setData] = useState("")
     const [tags, setTags] = useState(new Array<JSX.Element>())
-    const [loading, setLoading] = useState(false)
     const dispatch = useAppDispatch();
     const getNodes = useAppSelector(nodes);
     const getProducts = useAppSelector(products);
     const getHints = useAppSelector(hints);
+    const getLoading = useAppSelector(loading)
     const [autoCompleteValue, setAutoCompleteValue] = useState("")
     const onChange = (text:string) =>{
-        if (text.length >= 3 && text.length%3 == 0){
+        if (text.length >= 3 && text.length%2 == 0){
             dispatch(
                 createHints({word:text, hints:getHints.length == 0? []: getHints.map((el)=>el.value)})
             )
@@ -69,8 +69,8 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
     }
 
     const onEnter = (value:any) => {
-        setLoading(true)
         console.log(getNodes);
+        dispatch(setLoading(true))
         dispatch(
             search(
                 getNodes.concat(
@@ -130,7 +130,7 @@ export const Search: React.FC<{onData:(data:any)=>void}> = (props) =>{
             onSearch={(e) => onEnter(e)}
             size="large"
             placeholder="Поиск товара"
-            loading={loading && getProducts.length == 0}
+            loading={getLoading}
             enterButton />
         </AutoComplete>
 

сomponents/search/search.module.css

@@ -4,6 +4,7 @@
     border: 1px solid #BDBDBD;
     border-radius: 0px 17px 17px 0px !important;
     background-color: #DB2B21;
+    z-index: 0;
 }
 
 .search button:hover{
@@ -14,7 +15,7 @@
 
 .search.ant-input-group-addonn{
     background-color: #e7eef7 !important;
-
+    
 }
 
 .search input{