Updating custom-mapping.json make the application very slow to load

[dendico]

🐛 Bug Report

After having updated the custom-mapping.json file, our loading time jumped from few seconds to approximatively 15 ! In our modifications possibly involved, we pointed :

• Passing json file to multiples js files
• Adding states variants into Button component mapping (verified)

To Reproduce

• Install and configure project with UI Kitten
• Add new states on Buttons component mapping in custom-mapping.json for example
• Get your timer and compile then launch

Expected behavior

The application compile and load with no more significant delay

UI Kitten and Eva version

Package	Version
@eva-design/eva	1.3.0
react-native-ui-kitten	4.3.1

Environment information

System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3, 29.0.2
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.5429.30.34.5452501
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 

[artyorsh]

Are you sure this is custom mapping issue? We use it in every side project and looks like this is a first issue with it. It simply performs lodash.merge with the future processing of the resulting mapping.

However, can you please provide more info on the device you're running the application and more information about the environment. Does it run with Expo?

[qlerebours]

Hello,
I'm a colleague of @dendico. I invastigated on this issue during a few hours.
We had some troubles to understand why the app was so long to initialize, that's why I git checked out on differents commits to find when it started to be long. I found the precise commit and I was able to find precisely the lines of code that were raising the init time from 13 seconds to more than 1 minute.

Here are those lines

    Button: {
      meta: {
        ...
        states: {
          rounded: {
            default: false,
            priority: 0,
            scope: 'all',
          },
          squared: {
            default: false,
            priority: 0,
            scope: 'all',
          },
        },
        ...
      }
    }

This is custom-mapping.js, not json, but I tried to use json and I had the same issue.

To be sure that those lines was involved, I was using this process:

• Remove the lines
• Delete app
• run yarn start --reset-cache
• run yarn android (to make it run on my Xiaomi MI5, but it's the same with a Simulator and other phones)
• Time the duration where we could see the white screen, before we could see the first screen of our app.

I tried multiple times to add and remove those lines and I'm sure that it adds more that 40 seconds to the initialization time.
We removed those lines and found a workaroud, but we still have an initialization time of 13 seconds today, due to other changes and it's not just in dev mode, when we release the application, it takes the same time before we can see the Home screen.

Note that It's not running with Expo.

[artyorsh]

@dendico any chance to have a look on App.js? Do you use React Native Navigation?

[qlerebours]

Hello @artyorsh
I removed the code from the app, now there's just a Router (yeah, with React Navigation), and the custom mapping. It's still 13s long to start.
You can download the zip here: https://mega.nz/#!1hF2RSiL!CskClSaAQ4NjNaEUawvtAM_JC5UyU8UYaeKL21GhM2U

To run it:
yarn && yarn start
yarn android to run on an Android device / simulator

You should see a white screen during 13 seconds before seeing the Welcome message.
Each reload (not hot reload) will take the same time (13s)

Thanks for taking your time to answer :)

[artyorsh]

@qlerebours I was not able to run your application because it looks like you forgot to remove some dependencies from the native side, so in order to get rid of this, I just took your theme and mapping and put it into my application.

You guys did a lot of customization. However, when I remove a Button from custom mapping it takes much less time to process it. It will take me a lot of time to see what exactly is done wrong in Button mapping. Do you really need all of this in mapping and it could not be handled by modifying theme variables?

Btw, we're going to update the processing engine to get rid of runtime calculations. It may be available in the next major update because it can lead to breaking changes. As for now, if you need a fix as soon as possible, I can suggest you this workaround.

[dendico]

Hello @artyorsh !
Thanks a lot for your explanations and sorry for my late reply!

I think we already customized as far as we could the theme variables but yes, we needed most of the modifications made into the mapping file.

We will check to implement this suggested workaround and then share here the results, thank you again!

[artyorsh]

@dendico Could you please review the idea of this pr and give feedback?