How to use spinner container?

[kemeris2000]

Display block skeleton works for page initialization events, but doesn't work for Content events like onMount.
Tried spinner container, but from documentation it's not very clear how to use it.

The following doesn't work for me. In all cases spinner always spin:

            blocks:
              - id: d20dce1d-2e6c-47c7-890e-2336f89b5917
                type: Button
                properties:
                  title: Show spinner
                events:
                  onClick:
                    - id: dad4e11a-e691-4672-b9a1-f2e518102e2f
                      type: SetState
                      params:
                        spinning: true                    
                    - id: wait
                      type: Wait
                      params:
                        ms: 2000
                    - id: 9d4f6c4a-d0c4-433c-94d4-082a7cb29006
                      type: SetState
                      params:
                        spinning: false
              - id: spinner1
                type: Spinner
                blocks:
                  - id: 876c1b75-a63d-4b19-b035-502b10d48159
                    type: Span
                    properties:
                      content: Spinner content  

            blocks:
              - id: d20dce1d-2e6c-47c7-890e-2336f89b5917
                type: Button
                properties:
                  title: Show spinner
                events:
                  onClick:
                    - id: dad4e11a-e691-4672-b9a1-f2e518102e2f
                      type: SetState
                      params:
                        spinner_state: true                    
                    - id: wait
                      type: Wait
                      params:
                        ms: 2000
                    - id: 9d4f6c4a-d0c4-433c-94d4-082a7cb29006
                      type: SetState
                      params:
                        spinner_state: false
              - id: spinner1
                type: Spinner
                spinning: spinner_state
                blocks:
                  - id: 876c1b75-a63d-4b19-b035-502b10d48159
                    type: Span
                    properties:
                      content: Spinner content  

[Gervwyk]

Hi @kemeris2000
It's actually a little simpler than this.
On the blocks page in the docs see "Blocks loading" https://docs.lowdefy.com/blocks

      - id: a_block
        type: Span
        loading:
          _eq:
            - _state: spinner_state
            - true
        skeleton:
          type: Spinner
        properties:
          content: Conent when not loading

However, if you want to use the spinner with state management like in your example, maybe the visible key is what you are looking for?

             - id: d20dce1d-2e6c-47c7-890e-2336f89b5917
                type: Button
                properties:
                  title: Show spinner
                events:
                  onClick:
                    - id: dad4e11a-e691-4672-b9a1-f2e518102e2f
                      type: SetState
                      params:
                        spinner_state: true                    
                    - id: wait
                      type: Wait
                      params:
                        ms: 2000
                    - id: 9d4f6c4a-d0c4-433c-94d4-082a7cb29006
                      type: SetState
                      params:
                        spinner_state: false
              - id: spinner1
                type: Spinner
                visible: 
                  _state: spinner_state
                blocks:
                  - id: 876c1b75-a63d-4b19-b035-502b10d48159
                    type: Span
                    properties:
                      content: Spinner content  

[kemeris2000]

That was first thing I have tried, and it didn't work because I was setting loading value inside skeleton itself, like this:

- id: 12a10dbd-00a1-4cb8-bc17-17ee0a2ca06f
  type: SetState
  params:
    spinner_state: true


blocks:
  - id: cf5fbe89-e842-4128-899f-98140a409dd4
    type: Card
    skeleton:
      type: Spinner
      properties:
        size: large
    loading:
      _eq:
        - _state: spinner_state
        - true
    blocks:
      - id: 3b513af6-685a-4265-b0c2-dbac333c6c47
        type: Content
        events:
          onMount:
            try:
              _build.array.flat:
                on:
                  - _ref: pages/user/_domains/actions/get_Zone.yaml
                  - _ref: pages/user/_domains/actions/get_dnsRecords.yaml
                  - - id: baec75b3-691c-4b94-8368-2c90cdba68ed
                      type: SetState
                      params:
                        spinner_state: false

Thank you for your help.

My app consist of 159 files with 26285 lines of code. At this size future development became difficult without some GUI (I use Visual code studio alone)

[Gervwyk]

Amazing, that's a large app! Never checked before, but our two largest apps are about 500 files currently, and growing, and then we have a few at around 200 and smaller.

For me working, it is just as easy to work on a small or a large app, and a lot easier than a large js app.

Would be interested in understanding your use case, and discussing how you are currently developing and debugging. But I agree, there is a lot of potential to improve the DX.